setState在useState

时间:2020-02-10 11:52:49

标签: reactjs react-hooks use-state

当用户单击时,我正在使用useState Hook存储用于管理视图的表单。界面显示良好,但是我无法在输入字段中输入值。谁能告诉我为什么?谢谢。

const [url, seturl] = useState({url: ''});
const changeUrl = (field) => (event) => {
    seturl({
    ...url,
    [field]: event.target.value,
   });
 };
const [step, setStep] = useState(
   <form>
     <input type="text" value={url.url} onChange={changeUrl('url')}/>
    </form>
);
return (
  <div>{step}</div>
);

3 个答案:

答案 0 :(得分:1)

如果要将某些内容传递给onChange上的函数,则需要这样调用:

onChange={e => seturl({ url: e.target.value })}

或者您可以通过执行以下操作来简单地实现此目的:

const [url, setUrl] = useState('');

return (
  <div>
    <form>
     <input type="text" value={url} onChange={e => setUrl(e.target.value)}/>
    </form>
  </div>
);

以上示例的要点是使用钩子来简化自己并摆脱管理对象的麻烦。如果您还有urlpage之类的字段,则可以创建多个状态,如:

const [url, setUrl] = useState('');
const [page, setPage] = useState('');

希望这会对您有所帮助。

答案 1 :(得分:1)

您需要调用changeURL函数onChange,而不是每次都调用。

使用您的代码,将在每个渲染器上触发changeUrl('url')。 为避免这种情况,您需要在输入字段为onChange={e => changeUrl(e)}

的情况下将其作为函数调用

答案 2 :(得分:1)

 const [url, seturl] = useState("url");

  const changeUrl = event => {
    seturl( event.target.value);
  };

  return (
    <div>
      <form>
        <input type="text" value={url} onChange={(e)=>changeUrl(e)} />
        <p>URL: {url}</p>
      </form>
    </div>
  );