Question

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

现在，我遇到以下错误，无法正常工作。

警告：道具类型失败：您向没有checked处理程序的表单字段提供了onChange道具。这将呈现一个只读字段。如果该字段是可变的，请使用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挂钩进行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>

选中此复选框后，文本不会显示在react挂钩中

1 个答案: