Реагируйте: контролируемые входы в функциональных компонентах, используя useState - PullRequest
Новая
       11

Реагируйте: контролируемые входы в функциональных компонентах, используя useState

3 голосов
/ 11 марта 2019

Я пытаюсь написать функциональный компонент, который включает <input>, но я получаю «Компонент изменяет неконтролируемый ввод текста типа для управления».ошибка и не могу понять, что я делаю неправильно.

Я сократил свой код до этого, что воспроизводит проблему: 

function Input({ value, onChange }) {
    const [text, setText] = useState(value);

    function update(event) {
        setText(event.target.value);
        if (typeof onChange === "function") {
            onChange(event.target.value);
        }
    }

    return (
        <input type="text" value={text} onChange={update} />
    );
}

Я не совсем уверен, какиспользовать useState здесь, чтобы сделать это контролируемым элементом - потому что это явно не работает: (

Что я делаю не так?

1 Ответ

4 голосов
/ 11 марта 2019

Скорее всего, вы не передаете value реквизит для вашего Input компонента, что приведет к тому, что text будет изначально undefined, а когда вы установите текст в update, он станет управляемым.

Вы можете изменить код для передачи value реквизита на Input каждый раз, когда вы его используете, или задать value значение по умолчанию для пустой строки. 

function Input({ value = "", onChange }) {
    const [text, setText] = useState(value);

    function update(event) {
        setText(event.target.value);
        if (typeof onChange === "function") {
            onChange(event.target.value);
        }
    }

    return (
        <input type="text" value={text} onChange={update} />
    );
}
...