javascript - Enable-Disable button with ReactJS - Stack Overflow

admin管理员组

文章数量:1340361

I am trying to enable or disable a button based on whether or not there is text in my input but cant seem to achieve it. When I manually set {true OR false} in the disabled property of Button function it works fine but I am really confused on how to set that dynamically based on the content of the input.

Any guidance is super wele!

This is my app code

import { useState } from "react";

function Input (props){
    const { onChange, value } = props
    return (<input value={value} onChange={onChange} type="text" placeholder="Add a ToDo" maxLength="50"/>)
}

function Button (props) {
    const {onChange, state, text} = props
    return (<button disabled={false} onChange={onChange}>{text}</button>)
}

function App() {
  const [text, setText] = useState("");
  const [state, setSate] = useState(true);

  const handleChange = (event) => {
    if (!setText(event.target.value)) {
      setSate(false);
    } else {
      setSate(true);
    }
  };

  return (
    <div className="App">
      <div className="container">
        <Input value={text} onChange={handleChange} />
        <Button onChange={() => handleChange(state)} text="Add" />
        <Button onChange={() => handleChange(state)} text="Clean" />
    </div>
  );
}

export default App;

I am trying to enable or disable a button based on whether or not there is text in my input but cant seem to achieve it. When I manually set {true OR false} in the disabled property of Button function it works fine but I am really confused on how to set that dynamically based on the content of the input.

Any guidance is super wele!

This is my app code

import { useState } from "react";

function Input (props){
    const { onChange, value } = props
    return (<input value={value} onChange={onChange} type="text" placeholder="Add a ToDo" maxLength="50"/>)
}

function Button (props) {
    const {onChange, state, text} = props
    return (<button disabled={false} onChange={onChange}>{text}</button>)
}

function App() {
  const [text, setText] = useState("");
  const [state, setSate] = useState(true);

  const handleChange = (event) => {
    if (!setText(event.target.value)) {
      setSate(false);
    } else {
      setSate(true);
    }
  };

  return (
    <div className="App">
      <div className="container">
        <Input value={text} onChange={handleChange} />
        <Button onChange={() => handleChange(state)} text="Add" />
        <Button onChange={() => handleChange(state)} text="Clean" />
    </div>
  );
}

export default App;

• javascript
• reactjs
• react-hooks
• togglebutton
• use-state

Share Improve this question Follow asked Feb 8, 2021 at 23:56 elisaelisa 22911 gold badge22 silver badges88 bronze badges 1

• Does this answer your question? How to disable button in React.js – DDomen Commented Feb 9, 2021 at 0:01

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

Button element should change to:

function Button (props) {
    const {disabled, onChange, state, text} = props
    return (<button disabled={disabled} onChange={onChange}>{text}</button>)
}

Rendering of it should change to:

...
<Button disabled={!text} onChange={() => handleBtn()} text="Add" />
...

Sandbox: https://codesandbox.io/s/zen-hawking-qqzkw?file=/src/App.js

The idea is to send down disabled prop which would be true if the there is no text in the field.

ALSO, handleChange should look like this:

  const handleChange = (event) => {
    setText(event.target.value);
  };

because the rest of your code in that function does not do anything.

Buttons should have their own handler functions .e.g. const handleBtn = () => {};

So you should pass the state value you are using to store whatever the users write in the input to the button so that the button knows when the input has text on it or not. And then your second state value can be used to store your todo list, so something like this

import { useState } from "react";

function Input({ handleChange, value }) {
  return (
    <input
      value={value}
      onChange={handleChange}
      type="text"
      placeholder="Add a Todo"
      maxLength="50"
    />
  );
}

function Button({ handleClick, text, disabled }) {
  return (
    <button disabled={disabled} onClick={handleClick}>
      {text}
    </button>
  );
}

function App() {
  const [value, setValue] = useState("");
  const [todoList, setTodoList] = useState([]);

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  const handleAdd = () => {
    setTodoList([...todoList, value]);
    handleClear();
  };

  const handleClear = () => {
    setValue("");
  };

  return (
    <div className="App">
      <div className="container">
        <Input value={value} handleChange={handleChange} />
        <Button handleClick={handleAdd} disabled={!value} text="Add" />
        <Button handleClick={handleClear} disabled={!value} text="Clear" />
      </div>
    </div>
  );
}

export default App;

本文标签： javascriptEnableDisable button with ReactJSStack Overflow