setState не работает с помощью onChange внутри useState - PullRequest
Новая
       6

setState не работает с помощью onChange внутри useState

0 голосов
/ 10 февраля 2020

Я использую 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 ]

1 голос
/ 10 февраля 2020

Вам нужно вызывать функцию changeURL onChange, а не каждый раз.

С вашим кодом, changeUrl ('url') запускается при каждом рендеринге. Чтобы избежать этого, вам нужно вызвать его как функцию с событием вашего поля ввода: onChange={e => changeUrl(e)}

1 голос
/ 10 февраля 2020 
 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>
  );
1 голос
/ 10 февраля 2020

Если вы передаете что-то функции в 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('');

Надеюсь, это поможет вам.

...