如何在 Reactjs 中更新对象答案

【问题标题】：How do I update an object in Reactjs如何在 Reactjs 中更新对象
【发布时间】：2014-10-10 07:27:55
【问题描述】：

我在reactjs 中有一个表单，我将用它来创建用户。这是我的代码的重要部分：

   var AddUser = React.createClass({
    mixins: [OverlayMixin],
    getInitialState: function() {
        this.state.user = {}
        return {
            isModalOpen: false
        };
    },
    addScout: function() {
       UserCreator.addUser({
         user: this.state.user
       })
    },
    ....
    updateUser: function(e) {
        this.state.user[e.currentTarget.id] = e.currentTarget.value;
    },
    ...
    render: function() {
        return ( < button onClick = { this.toggleModal} type = "button" className = "btn btn-success" >Add User < /button>
        );
    },
    renderOverlay: function() {
        if (!this.state.isModalOpen) {
            return <span></span>
        }
        return (
            < Modal title = "Add a User" onRequestHide = { this.handleToggle} >
                < div className = "modal-body" >
                    <form>
                        <div className="form-group">
                            <label for="first_name">First Name</label>
                            <input id="first_name" className="form-control" onBlur={this.updateUser}></input>
                        </div>
                        <div className="form-group">
                            <label for="last_name">Last Name</label>
                            <input id="last_name" className="form-control" onBlur={this.updateUser}></input>
                        </div>
                    </form>
                < /div>
                <div className="modal-footer">
                    <button onClick={this.addUser} className="btn btn-primary">Add</button >
                    <button onClick={this.toggleModal} className="btn btn-warning">Cancel</button >
                < /div>
            </Modal >
        );
    }
});

当用户打开模式并输入名字或姓氏时，模糊事件会触发updateUser。当addUser 按钮被点击时，UserCreator.addUser 被调用。

问题是我没有用setState 设置状态。 reactjs 处理这些输入的方法是什么。如何创建一个对象来将输入推入？

【问题讨论】：

标签： reactjs

【解决方案1】：

问题是我没有用 setState 设置状态。处理这些输入的 reactjs 方法是什么。如何创建一个对象来将输入推送到其中？

处理它的反应方式是使用 setState。

您只需执行this.setState({user:user})，它就会更新您的视图。

如果您有合并/默认功能，您也可以这样做。它不会改变用户对象，它会创建它的更新版本。

updateUser: function(e) {
    var update = {};
    update[e.currentTarget.id] = e.currentTarget.value;
    this.setState({user: merge({}, user, update)};
},

您不应该使用 id，因为您正在对所有其他组件的实现做出假设（id 必须是唯一的！）。取而代之的是，您可以使用返回更改处理程序的函数。

makeChangeHandler: function(property) {
    return function(event){
        // apply it to state; optionally replace this with the immutable example from above
        this.state.user[property] = event.target.value;
        this.setState({user: this.state.user});
    }.bind(this)
}

<input className="form-control" onBlur={this.makeChangeHandler('first_name')}></input>

您的 getInitialState 函数应如下所示：

getInitialState: function() {
    return {
        isModalOpen: false,
        user: {}
    };
},

旁注：阅读Working with Forms。

【讨论】：