0

我有两个组件：应用程序和注册表单

该表单有两个输入：姓名和姓氏

查看 dev 中的 App 状态。我看到的工具长度：未定义和名称：“输入的名称”。我没有收到任何错误，但我缺少姓氏。

这只发生在 Rails 中。我在非 Rails 环境中尝试了相同的代码，它工作正常。我将这个 gem 用于 React：gem 'react-rails', '~> 1.5.0' 并运行 Rails 4.2.4

var App = React.createClass({
    getInitialState : function(){
        return {
            registrations: {}
        }
    },
    addRegistration : function(registration){
        // create unique id 
        var timestamp = (new Date()).getTime();
        // update state 
        this.state.registrations['registration-' + timestamp] = registration;
        //set the state
        this.setState({ registrations : this.state.registrations });

    },
    render : function(){
        return (
            <RegistrationForm addRegistration={this.addRegistration}/>
        )
    }
});

var RegistrationForm = React.createClass({
    createRegistration : function(event){
        // prevent default
        event.preventDefault();
        // take data from form and create object
        var registration = {
            name : this.refs.name.value,
            lastname : this.refs.lastname.value
        }
        // Add registration to App Object
        this.props.addRegistration(registration);
        this.refs.registrationForm.reset();

    //console.log(registration);
    },
    render : function(){
        return (
            <div className="col-sm-12">
                <form action="" className="form" ref="registrationForm" onSubmit={this.createRegistration}>
                    <div className="form-group">
                        <label >Name</label>
                        <input className="form-control" ref="name"/>
                    </div>
                    <div className="form-group">
                        <label >Last Name</label>
                        <input className="form-control" ref="lastname"/>
                    </div>
                    <div>
                        <button className="btn btn-primary">Submit</button>
                    </div>
                </form>
            </div>
        )
    }
});

App = React.createFactory(App)

我要做的是根据时间戳为每个注册提供一个唯一的 ID 号。

当我控制台记录以下内容时：

addRegistration : function(registration){
    // create unique id 
    var timestamp = (new Date()).getTime();
    // update state 
    this.state.registrations['registration-' + timestamp] = registration;
    //set the state
    this.setState({ registrations : this.state.registrations });

},

我可以按照我想要的方式查看注册对象。我可以向 App 状态添加尽可能多的唯一注册，但每个注册都有 length: undefined, name: "name" ，但它缺少姓氏。

如果我将设置状态更改为：

this.setState({ registrations : registration });

这给了我一个包含姓名和姓氏的单一注册，但它不会添加多个注册。它只创建一个注册，每次我提交添加注册表单时都会更新。

4

2 回答 2

0

this.state.registrations['registration-' + timestamp] = registration;

根据 React Docs https://facebook.github.io/react/docs/component-api.html ，您似乎直接改变了状态

永远不要直接改变 this.state ，因为setState()之后调用可能会替换你所做的改变。this.state就好像它是不可变的一样对待。

setState()不会立即变异this.state，而是创建一个挂起的状态转换。在调用此方法后访问 this.state 可能会返回现有值。

无法保证对 setState 的调用同步操作，并且可能会批处理调用以提高性能。

setState() 将始终触发重新渲染，除非在 shouldComponentUpdate(). 如果正在使用可变对象并且无法在 中实现逻辑shouldComponentUpdate()，则仅在新状态与先前状态不同时调用 setState()将避免不必要的重新渲染。

尝试克隆当前状态，然后将其用作参数。

// if array
var clonedRegistration = this.state.registrations.slice();
clonedRegistration['registration-' + timestamp] = registration;

this.setState({registrations: clonedRegistration})

或者

this.setState({registrations: {['registration-'+ timestamp]: registration} });
于 2015-12-26T02:25:32.130 回答
0

我认为路放的答案很接近。

首先将您的初始状态设置为一个数组。

getInitialState: function(){
      return { registrations: []}
    }

你的 addRegistration 功能

addRegistration : function(registration){

我认为这是你所缺少的：

//getting current state
var oldRegistrations = this.state.registrations;

否则，我相信您会一遍又一遍地更新相同的内容，而不是添加新的注册对象。然后推送您的注册。您应该设置时间戳

// update state 
oldRegistrations.push(registration);
var registrations = oldRegistrations;

//set the state

this.setState({ registrations : registrations });
},

我建议在这里的某个地方创建 id，因为您没有对 rails db 使用实际的 ajax 调用：

var registration = {
            name : this.refs.name.value,
            lastname : this.refs.lastname.value
                  id: (new Date()).getTime();
}

我不确定我是否理解您关于表单值的问题，或者您是否遇到了问题。但如果你是我认为做这样的事情可能会有所帮助：

 <input type='text' className='form-control'
                 placeholder='Name' name='name'
                 value={this.state.name} onChange={this.handleChange} >
 </input>

 <input type='text' className='form-control'
                 placeholder='Last Name' name='last name'
                 value={this.state.last_name} onChange={this.handleChange} >
 </input>

然后在同一个组件中实现一个handleChange函数来不断处理表单的onChange值。这应该是这样的：

handleChange: function(e) {
    var name = e.target.name;
    var obj = {};
    obj[name] = e.target.value;
    this.setState(obj);
}

希望这可以帮助，

于 2016-01-05T02:43:31.080 回答