Question

我是ReactJS的新手。

我正在做的是当我输入任何字段时，状态应该在特定字段中更新 -

这是我的LoginComponet和设置小表格 -

import React, { Component } from 'react';
import '../css/style.css';


export class LoginCompoent extends Component {

constructor(props) {
    super(props);
    this.state = {
        field: {
            phone: {
                value: '',
                validations: [],
                errors: []
            },
            password: {
                value: '',
                validations: [],
                errors: []
            }
        }
    };
    this.handelChangeEvent = this.handelChangeEvent.bind(this);
}

componentDidMount() {

}

handelChangeEvent(event) {

    this.setState({
        field: {
            [event.target.id]: {
                'value': event.target.value
            }
        }
    });
}

render() {
    console.log(this.state);

    return (
        <div className="loginMainDiv" >
            <div className="">
                <input className="login_inp" placeholder="Mobile Number"
                    value={this.state.field.phone.value}
                    onChange={this.handelChangeEvent}
                    type="text" name="phone" id="phone"
                />
                <input className="login_inp" placeholder="Password"
                    value={this.state.field.password.value}
                    onChange={this.handelChangeEvent}
                    type="password" name="password" id="password"
                />
                <button className="login_btn" >Login Safely</button>
            </div>
        </div>
    );
}

}

预期结果 - 在console.log(this.state);

上

当我在手机字段中输入9时 -

      field: {
            phone: {
                value: '9',
                validations: [],
                errors: []
            },
            password: {
                value: '',
                validations: [],
                errors: []
            }
        }

获得结果 -

field: {
            phone: {
                value: '9'
            }
        }

当我仅更新手机字段时，我不知道为什么所有字段都会突然隐藏。？

由于此密码未在表单中设置。错误 - this.state.field.password是undefined ???

Answer 1

深度合并问题，当您为输入设置名称属性时，这应该有效：

this.setState(prevState => ({
  field: {
    ...prevState.field,
    [event.target.name]: {
      'value': event.target.value
    }
  }
}));

Answer 2

在handleChangeEvent函数中，您正在更新状态中field的值：

this.setState({field: {
    [event.target.id]: {
        'value': event.target.value
    }
}})

这显然会覆盖field的现有价值。

在您的情况下，我建议使用setState内的回调函数。请参阅docs。

例如，如果您想更新phone的值，但您希望密码的值保持不变，您可以执行以下操作：

handleChangeEvent = (event) => {
    this.setState((prevState) => {
      return {field: {
                [event.target.id]: event.target.value,
                ...prevState.field
            }
        };
    });
}

Answer 3

我已经尝试了以上所有答案但面临错误。

错误 - 未捕获的TypeError：无法在this.setState上读取null的属性'id'（prevState =＆gt;（{}））。

问题是 - 事件的引用不会在异步调用中维护，这就是event.target变为null并超过错误的原因。

我得到了event.persist()的概念，它有助于维护事件的所有引用，并使用异步调用将Wrapper设置为浏览器事件。

您可以转到此Article参考

在Render上获取React组件时出错

3 个答案: