setState 在 useState 中的 onChange 不起作用

Question

我正在使用 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>
);

Answer 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>
);

从上面的例子中得到的收获是使用钩子来方便你自己并摆脱管理对象。如果您有更多字段，例如 url 和 page，您可以创建多个状态，例如：

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

希望对您有所帮助。

Answer 2

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

使用您的代码，每次渲染都会触发 changeUrl('url') 。为避免这种情况，您需要将其作为函数调用，并在输入字段的事件中使用：onChange={e => changeUrl(e)}

Answer 3

 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>
  );

setState 在 useState 中的 onChange 不起作用

setState not work by onChange inside useState

reactjs

react-hooks

use-state