Неконтролируемый ввод React Hooks - PullRequest
Новая
       3

Неконтролируемый ввод React Hooks

0 голосов
/ 06 июня 2019

Я начал рассказывать о реактивных хуках с помощью простого учебника , и, к моему удивлению, я получил ошибку, которую не могу понять:

Предупреждение: компонент меняет неконтролируемый ввод текста типа на быть под контролем Элементы ввода не должны переключаться с неуправляемого на контролируемый (или наоборот). Выберите между использованием контролируемого или неуправляемый элемент ввода для времени жизни компонента.

После этой ошибки мой компонент исчезает, но я все еще могу ввести данные, которые будут правильно распечатаны в консоли.

Я попытался установить начальное состояние для входов и изменить 

setInputs(inputs => ({
  ...inputs, [event.target.name]: event.target.value
}));

до 

setInputs({...inputs, [event.target.name]: event.target.value});

но я все еще получаю ошибку.

JSX 

import React from 'react';
import './styles/form.scss';
import useSignUpForm from './hooks/customHooks.jsx';

const Form = () => {

    const {inputs, handleInputChange, handleSubmit} = useSignUpForm();

    return (
        <React.Fragment>
            <div className="formWrapper">
                <h1 className="header">Form</h1>
                <form onSubmit={handleSubmit}>
                    <div className="form-group">
                        <label htmlFor="nicknameInput">Nickname</label>
                        <input type="text" id="nicknameInput" name="nickname" onChange={handleInputChange}
                               value={inputs.nickname} required/>

                        <label htmlFor="emailInput">Email Address</label>
                        <input type="text" id="emailInput" name="email" onChange={handleInputChange}
                               value={inputs.email} required/>

                        <label htmlFor="lastName">Last Name</label>
                        <input type="text" id="lastName" name="lastName" onChange={handleInputChange}
                               value={inputs.lastName} required/>
                    </div>
                    <button type="submit" className="btn btn-primary">Submit</button>
                </form>
            </div>
        </React.Fragment>
    )
};

export default Form;

Крючки 

import React, {useState} from 'react';

const useSignUpForm = (callback) => {
    const [inputs, setInputs] = useState({});
    console.log(inputs);

    const handleSubmit = (event) => {
        if (event) {
            event.preventDefault();
        }
    };

    const handleInputChange = (event) => {
        event.persist();
        setInputs(inputs => ({
                ...inputs, [event.target.name]: event.target.value
            })
        );
    };

    return {
        handleSubmit,
        handleInputChange,
        inputs
    };

};

export default useSignUpForm;

Есть идеи, что вызывает эту ошибку?

Ответы [ 2 ]

1 голос
/ 06 июня 2019

Вы получаете ошибку, потому что ваши входные данные начинают свою жизнь как undefined и затем имеют значение. Если вы объявите свой объект в const [inputs, setInputs] = useState({});, он исчезнет. 

const [inputs, setInputs] = useState({
   nickname: '',
   lastname: '',
   email: ''
});
0 голосов
/ 06 июня 2019

Мой любимый способ обработки управляемых входов в обработчиках реагирования - это синтаксис. Создайте отдельное состояние для каждого входа, который вы пытаетесь обработать, а затем внутри onChange просто вызовите setInput 

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

причина возникновения ошибки в том, что исходное состояние - это просто пустой объект, если вы хотите сделать это таким образом, вам придется изменить свое состояние на. 

const [inputs, setInputs] = useState({
   nickname: '',
   lastname: '',
   email: ''
});
...