不受控制的输入 React Hooks

Posted 2023-02-22

【中文标题】不受控制的输入 React Hooks

【英文标题】：Uncontrolled input React Hooks

【发布时间】：2019-10-22 06:42:35

【问题描述】：

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

警告：组件正在将文本类型的不受控制的输入更改为 被控制。输入元素不应从不受控制切换到 控制（反之亦然）。决定使用受控或 在组件的生命周期内不受控制的输入元素。

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

我已经尝试为输入设置初始状态并进行更改

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;

任何想法是什么导致了这个错误？

【问题讨论】：

仅供参考，这些是受控而非不受控制的输入。

【参考方案1】：

您遇到了错误，因为您的输入以undefined 开始，然后有一个值。如果你用这个替换这个const [inputs, setInputs] = useState();：

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

它会消失的。

【讨论】：

该死，成功了，我以为我已经尝试过了，但是谢谢！

哇，我在这个问题上撞了这么久。没有意识到未定义的值是问题所在。谢谢

【参考方案2】：

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

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

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

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