选中复选框后，文本不会显示在反应挂钩中

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

我们可以优化代码，

删除 const [showToken, setShowToken] = useState({ show: false }); 行
使用 checked 属性显示文本框。
使用 setChecked 钩子设置复选框已选中 changes.So 我们不再需要 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>

选中复选框后，文本不会显示在反应挂钩中

Once the checkbox is checked, the text is not displaying in react hooks

reactjs

react-hooks

react-hook-form