不受控制的输入 React Hooks

Question

我已经开始使用 simple tutorial 学习 react-hooks，令我惊讶的是我遇到了一个我无法弄清楚的错误：

Warning: A component is changing an uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component.

发生此错误后，我的组件消失了，但我仍然可以输入数据，这些数据将在控制台中正确打印出来。

我试过为输入设置初始状态并更改

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;

知道导致此错误的原因吗？

Answer 1

您收到错误消息，因为您的输入以 undefined 的形式开始，然后具有一个值。如果将此 const [inputs, setInputs] = useState({}); 替换为：

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

它会消失。

Answer 2

我最喜欢在反应挂钩中处理受控输入的方法是这种语法。为您尝试处理的每个输入创建单独的状态，然后在 onChange 中调用 setInput

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

你出错的原因是因为初始状态只是一个空对象，如果你想这样做，你必须将你的状态更改为。

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

不受控制的输入 React Hooks

Uncontrolled input React Hooks

html

javascript

reactjs

react-hooks