使用 ReactJS 启用-禁用按钮

Question

我正在尝试根据我的输入中是否有文本来启用或禁用按钮，但似乎无法实现。当我在 Button 函数的禁用属性中手动设置 {true OR false} 时它工作正常但我真的很困惑如何根据输入的内容动态设置它。

非常欢迎任何指导！

这是我的应用代码

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;

Answer 1

Button 元素应更改为：

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

它的渲染应更改为：

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

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

我的想法是发送 disabled 道具，如果该字段中没有文本，它将是 true。

此外，handleChange 应如下所示：

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

因为该函数中的其余代码没有执行任何操作。

按钮应该有自己的处理函数。例如const handleBtn = () => {};

Answer 2

因此，您应该将用于存储用户在输入中写入的任何内容的状态值传递给按钮，以便按钮知道输入何时包含文本。然后你的第二个状态值可以用来存储你的待办事项列表，所以像这样

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;

使用 ReactJS 启用-禁用按钮

Enable-Disable button with ReactJS

javascript

togglebutton

reactjs

react-hooks

use-state