在输入字段中使用 value={} 时 setState 无法正常工作答案

【问题标题】：setState not working properly when using value={} in input field在输入字段中使用 value={} 时 setState 无法正常工作
【发布时间】：2021-08-08 13:37:31
【问题描述】：

我正在使用 React JS。我正在设置状态，但是输入字段的 value={} 部分存在问题。

这是我的代码：

import React from 'react';



class SomeClass extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            passCode: {
                email: "Email",
                password: "Password"
            },
            errorMessage: ''
        };
    }



    handleChange = (event) =>{
        console.log(`input detected`);
        let request = Object.assign({},this.state.passCode);
        request.email = event.target.value;
        request.password = event.target.value;
        this.setState({passCode: request});
     }


    
    
    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                
                    <label>Email Address</label>
                    <input type="text" value={this.state.passCode.email} onChange={this.handleChange} placeholder="Enter Email Address" />
  
                    <label>Password</label>   
                    <input type="password" value={this.state.passCode.password} onChange={this.handleChange} placeholder="Enter One Time Password" />

                <Button type="submit">
                    Sign In</Button>
            </form>
        );
    }
    
}


export default SomeClass;

我的问题：

我是针对输入字段的value属性，我认为setState不能正常工作：

在状态的 passCode 对象中。当我键入电子邮件时，两个字段都设置为我在电子邮件字段中键入的内容。当我输入密码时，两个字段都会设置为我在密码字段中输入的内容。

出现这种问题的原因是什么？

【问题讨论】：

两者都有相同的处理程序，并且该处理程序将两个值设置为相同：request.email = event.target.value; request.password = event.target.value。所以我不知道为什么这种行为让你感到惊讶。您需要有单独的处理程序，只设置适当的字段，或者保留一个处理程序，但让它读取输入的 id/name（一旦您提供这些）来决定要更新状态的哪个字段。
不使用object.assign为什么不直接设置对象呢？

标签： javascript node.js reactjs react-hooks

【解决方案1】：

setState 工作正常；你的handleChange 不是。您将 both email 和 password 设置为输入值，无论更改发生在哪个输入上。相反，您只想更新相关属性。为此，我将name 属性添加到input 元素（name="email" 和name="password"），然后：

handleChange = ({currentTarget: {name, value}}) =>{
    console.log(`input detected`);
    this.setState(({passCode}) => {
        return {passCode: {...passCode, [name]: value}};
    });
};

关键位有：

它只更新与change 相关的属性，保持另一个不变，使用输入的名称。
它使用setState 的回调版本（最佳实践，因为我们根据现有状态设置状态）。

【讨论】：

（糟糕，我遗漏了一层。如果您没有看到上面return {passCode: {...passCode, [name]: value}}; 的{passCode: ...} 部分，请点击刷新。）
嵌套解构的好弹性

【解决方案2】：

你的函数handleChange 是错误的。您应该使用name 进行这样的更新：

handleChange = (event) => {
  console.log(`input detected`);
  const { name, value } = event.target;
  this.setState({ passCode: { ...this.state.passCode, [name]: value } });
};

并将name 设置为input：

<input type="text" value={this.state.passCode.email} onChange={this.handleChange} placeholder="Enter Email Address" name="email" />
<input type="password" value={this.state.passCode.password} onChange={this.handleChange} placeholder="Enter One Time Password" name="password" />

【讨论】：

【解决方案3】：

他们给的方法都不错，但是我还是建议你把改变两者的方法分开，也许会好很多。

【讨论】：