Javascript 使用ReactJS启用禁用按钮

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

欢迎任何指导

这是我的应用程序代码

从“react”导入{useState}；
功能输入（道具）{
常量{onChange，value}=props
返回（）
}
功能按钮（道具）{
const{onChange，state，text}=props
返回（{text}）
}
函数App（）{
const[text，setText]=useState（“”）；
const[state，setstate]=useState（true）；
常量handleChange=（事件）=>{
if（！setText（event.target.value））{
设置状态（假）；
}否则{
设置状态（真）；
}
};
返回(
handleChange（state）}text=“添加”/>
handleChange（state）}text=“Clean”/>
);
}
导出默认应用程序
按钮
元素应更改为：

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

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

因为该函数中的其余代码不起任何作用

按钮应该有自己的处理函数<代码>常量句柄tn=（）=>{}
按钮
元素应更改为：

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

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

因为该函数中的其余代码不起任何作用

按钮应该有自己的处理函数<代码>常量句柄tn=（）=>{}
因此，您应该将用于存储用户在输入中写入的内容的状态值传递给按钮，以便按钮知道输入上是否有文本。然后你的第二个状态值可以用来存储你的待办事项列表

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;


从“react”导入{useState}；
函数输入（{handleChange，value}）{
返回(
);
}
功能按钮（{handleClick，text，disabled}）{
返回(
{text}
);
}
函数App（）{
const[value，setValue]=useState（“”）；
const[todoList，setTodoList]=useState（[]）；
常量handleChange=（事件）=>{
设置值（event.target.value）；
};
常数handleAdd=（）=>{
setTodoList（[…todoList，value]）；
handleClear（）；
};
常量handleClear=（）=>{
设置值（“”）；
};
返回(
);
}
导出默认应用程序；
因此，您应该将用于存储用户在输入中写入的内容的状态值传递给按钮，以便按钮知道输入上是否有文本。然后你的第二个状态值可以用来存储你的待办事项列表

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;


从“react”导入{useState}；
函数输入（{handleChange，value}）{
返回(
);
}
功能按钮（{handleClick，text，disabled}）{
返回(
{text}
);
}
函数App（）{
const[value，setValue]=useState（“”）；
const[todoList，setTodoList]=useState（[]）；
常量handleChange=（事件）=>{
设置值（event.target.value）；
};
常数handleAdd=（）=>{
setTodoList（[…todoList，value]）；
handleClear（）；
};
常量handleClear=（）=>{
设置值（“”）；
};
返回(
);
}
导出默认应用程序；
这是否回答了您的问题？这回答了你的问题吗？