启用-使用ReactJS禁用按钮
启用-使用ReactJS禁用按钮
提问于 2021-02-09 07:56:41
我试图根据我的输入中是否有文本来启用或禁用按钮，但似乎无法实现。当我在Button函数的disabled属性中手动设置{true或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;
回答 2
Stack Overflow用户
回答已采纳
发布于 2021-02-09 08:06:25
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);
};因为该函数中的其余代码不会做任何事情。
按钮应该有自己的处理函数.e.g。const handleBtn = () => {};
Stack Overflow用户
发布于 2021-02-09 08:17:03
因此，您应该将用于存储用户在输入中写入按钮的内容的状态值传递给按钮，以便按钮知道输入中是否包含文本。然后你的第二个状态值可以用来存储你的待办事项列表，就像这样
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;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66111085
复制相关文章
相似问题
腾讯云开发者
