使用 ReactJS 启用-禁用按钮

Question

我试图根据输入中是否有文本来启用或禁用按钮，但似乎无法实现。当我在按钮功能的禁用属性中手动设置 {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 = () => {};