Как установить для useState const значение ввода при изменении

Question

скажем, я создал переменную в функциональном компоненте, например:

const [quizName, setQuizName] = useState("");

Как я могу изменить это значение в зависимости от того, что пользователь вводит во входные данные. Моя идея была такая:

<input
    value={quizName}
    onChange={setQuizName(value)}
></input>

Но он не знает, что это за значение, как мне получить значение в моей переменной quizName?

Answer 1

<input
    value={quizName}
    onChange={(e)=>setQuizName(e.target.value)}>
</input>

Answer 2

Самый простой способ - использовать функцию onChange ввода, например:

<input value={quizName} onChange={(e)=>setQuizName(e.target.value)} />

Все в порядке !, но, пожалуйста, ради БОГА, пожалуйста, прекратите это делать!

Вот причина:

вы создаете функцию при каждом изменении ввода и запускаете ее! это не нормально для тисков производительности! особенно если вы делаете это в крупномасштабном приложении везде в ваших компонентах!

вам нужно просто использовать, useCallbackкак показано ниже:

const [quizName, setQuizName] = useState("");

const handleInputChange = useCallback((e) => {
   setQuizName(e.target.value)
}, [setQuizName])


return (
   <input value={quizName} onChange={handleInputChange} />
)

вот описание useCallbackв документации по реакции:

https://reactjs.org/docs/hooks-reference.html#usecallback

Answer 3

onChange={setQuizName(value)}

Когда вы вызываете такую ​​функцию, она запускается, не дожидаясь, пока вы ее измените.

onChange={(e) => setQuizName(e.target.value)}

правильный способ сделать это