使用 ReactJS 的启用-禁用按钮答案

【问题标题】：Enable-Disable button with ReactJS使用 ReactJS 的启用-禁用按钮
【发布时间】：2021-02-08 23:56:40
【问题描述】：

我正在尝试根据我的输入中是否有文本来启用或禁用按钮，但似乎无法实现。当我在 Button 函数的 disabled 属性中手动设置 {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;

【问题讨论】：

这能回答你的问题吗？ How to disable button in React.js

标签： javascript reactjs react-hooks togglebutton use-state

【解决方案1】：

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

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;

【讨论】：

【解决方案2】：

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 = () => {};

【讨论】：