Question

我在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处理这些输入的方法。如何创建一个对象以将输入推入？

Answer 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。

如何更新Reactjs中的对象

1 个答案: