反应输入值在Onchange回调后重置为初始状态

Question

我有一个问题，其中我有一个输入来基于编辑当前值的用户。但是，在用户以新值类型后，该值将回到其初始状态值。

我在代码中放了一个调试点，发现我的onChange回调处理程序正常设置state并在输入字段中显示更改的值。但是，某些事件似乎会改变它。

这是我的组件：

class UserFields extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            user:props.user
        };
        this.handleInputChange = this.handleInputChange.bind(this);
    }
    handleInputChange(event) {
        const target = event.target;
        const value = target.type === 'checkbox' ? target.checked : target.value;
        const name = target.name;
        this.setState({
            [name]: value
        });
    }
    render() {
        const user = this.state.user;
        return (
            <form>
                <div className="form-group">
                    <label htmlFor="user-first-name">First name</label>
                    <input name="FirstName" type="text" value={user.FirstName} onChange={this.handleInputChange}
                        className="form-control" id="user-first-name" placeholder="First name" />
                </div>
                <div className="form-group">
                    <label htmlFor="user-last-name">Last name</label>
                    <input name="LastName" type="text" value={user.LastName} onChange={this.handleInputChange}
                        className="form-control" id="user-last-name" placeholder="Last name" />
                </div>
                <div className="form-group">
                    <label htmlFor="user-active">Active</label>
                    <input name="Active" id="user-active" type="checkbox" checked={user.Active} onChange={this.handleInputChange} />
                </div>
            </form>
        );
    }
}

我看到了与此相似的多个问题，这些问题用onChange回调函数在我的值上解释了setState。但是，它们似乎并没有解决我的问题。谁能帮我弄清楚为什么？

Answer 1

您的 value（例如），第一个名称为 this.state.user.FirstName。

在您的onChange处理程序中，您没有修改this.state.user。您正在完全修改其他内容（this.[name]？）。

在您的处理程序中，您需要带动旧用户并使用适当的字段修改的新用户（我建议Object.assign）。然后您致电this.setState({user: myNewUserObject})

请注意，叶片组件中这种状态处理可能会导致不直觉的行为。我强烈建议将您的状态存储在上层（在props内传播处理程序方法），以防您需要F.Ex。用输入数据进行AJAX调用。

Answer 2

您正在检索错误的值。您一直在使用默认值。从

更改它

value={user.FirstName}

to

value={this.state.FirstName ? this.state.FirstName : user.FirstName }

等等。