选中该复选框后，文本将不会显示在 react 钩子中

Question

一旦检查了checkbox，那么我想显示input文本字段。默认情况下，不应选中该复选框，而应隐藏token输入字段。

现在我得到以下错误并且无法正常工作。

警告：失败的道具类型：您为没有onChange处理程序的表单字段提供了checked道具。这将呈现只读字段。如果字段应该是可变的，请使用defaultChecked。否则，请设置onChange或readOnly

const [checked, setChecked] = useState(false);
const [showToken, setShowToken] = useState({ show: false });
const handleClick = (e) => {
e.preventDefault();
setChecked(checked);
if(checked === true){
setShowToken({ show: true })
}
}
<label>
<input type="checkbox" onClick={handleClick} checked={checked}/>
{
showToken.show && (
<input className="inputRequest formContentElement" name="token" type="text" placeholder="token"/>
)
}
</label>

Answer 1

我们可以将代码优化为，

1. 删除const [showToken, setShowToken] = useState({ show: false });行
2. 使用checked道具显示文本框。
3. 使用 set选中挂钩设置复选框选中的更改。所以我们不再需要handleClick方法。

您可以简单地执行以下操作，

// Get a hook function
const {useState} = React;
const Example = () => {
const [checked, setChecked] = useState(false);

return (
<div>
<label>
<input type="checkbox" onChange={() => setChecked(!checked)} checked={checked}/>
{
checked ? (
<input className="inputRequest formContentElement" name="token" type="text" placeholder="token"/>
) : (<div></div>)
}
</label>
</div>
);
};
// Render it
ReactDOM.render(
<Example />,
document.getElementById("react")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>