setState 不适用于 useState 内的 onChange

Question

I am using useState Hook to store a form to manage view when user click. The interface display good but I cannot enter value in the input field. Can anyone tell me why? thanks.

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

If you are passing something to the function on onChange you need to call it like:

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

Or you can simply achieve this by doing:

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

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

The take away from the above example is use hooks to facilitate yourself and get rid of managing the object. If you have more fields like url and page , you can create multiple states like:

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

Hope this will help you.

Answer 2

You need to call the changeURL function onChange, not everytime.

With your code, changeUrl('url') is fired on each render. To avoid this, you need to call it as a function, with the event of your input field : 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>
  );