Reactjs 忽略文本区域上的反应设置状态

我正在开发一个简单的meteor+react CRUD应用程序。在下面的代码中，我的

this.setState（）

似乎对

没有任何影响。因此，当我单击链接并重新呈现表单时，函数

clickLoadForm（appId）

会正确地更新

元素的状态，但不会更新

，即使console.log清楚地显示所有字段都有内容。我做错了什么

App = React.createClass({
  mixins: [ReactMeteorData],

  getMeteorData() {
    return {
      applications: Applications.find({}, {sort: {createdAt: -1}}).fetch(),
      currentApplication: Applications.findOne({_id:this.props.router.params.appid}, {sort: {createdAt: -1}}),
    }
  },
  getInitialState: function() {
    return this.loadForm(this.props.router.params.appid);
  },
  loadForm(appId) {
    var currentApp = Applications.findOne({_id:appId});
    if(!currentApp) currentApp = {};
    return currentApp;
  },
  clickLoadForm(appId)
  {
    var currentApp = this.loadForm(appId);
    var state = new Object();
    var refs = this.refs;
    Object.keys(refs).map(function(prop,index){
      state[prop] = typeof currentApp[prop] == 'undefined' ? "" : currentApp[prop];
    });
    console.log(state);
    this.setState(state);
  },
  renderListApplications() {
    var _this = this;
    return this.data.applications.map(function(applicationform,i) {
      return <li key={"li"+i}><a onClick={_this.clickLoadForm.bind(_this,applicationform._id)} href={Meteor.absoluteUrl()+'application/' +applicationform._id} key={"a"+i}>Version {applicationform._id}</a></li>;
    });
  },
  handleSubmit(event) {
    event.preventDefault();
    var refs = this.refs;
    var formVals = new Object();
    Object.keys(refs).map(function(prop, index){
      if(refs[prop].nodeName.match(/(INPUT|SELECT|TEXTAREA)/).length > 0)
        formVals[prop] = refs[prop].value;
    });

    Meteor.call("saveApplication", formVals);

  },
  handleChange: function(e) {
    if(!e.target.id) return;
    if(typeof e.target.id == 'undefined') return;
    var state = new Object();
    state[e.target.id] = e.target.value;

    this.setState(state);
  },
  render() {
    return (
      <div className="container">
          <ul>
            {this.renderListApplications()}
          </ul>
          <div>{JSON.stringify(this.data.currentApplication)}</div>
          <form className="new-task" onSubmit={this.handleSubmit} >
            <input ref="input_36" id="input_36" type="text" value={this.state.input_36} onChange={this.handleChange} />
            <input ref="input_37" id="input_37" type="text" value={this.state.input_37} onChange={this.handleChange} />
            <textarea ref="input_38" id="input_38" onChange={this.handleChange}>{this.state.input_38}</textarea>
            <textarea ref="input_39" id="input_39" onChange={this.handleChange}>{this.state.input_39}</textarea>
            <button type="submit">Submit</button>
          </form>
      </div>
    );
  }
});

App=React.createClass({
mixins:[数据]，
getMeteorData（）{
返回{
应用程序：applications.find（{}，{sort:{createdAt:-1}}）.fetch（），
currentApplication:Applications.findOne（{u id:this.props.router.params.appid}，{sort:{createdAt:-1}），
}
},
getInitialState:函数（）{
返回this.loadForm（this.props.router.params.appid）；
},
加载表单（appId）{
var currentApp=Applications.findOne（{u id:appId}）；
如果（！currentApp）currentApp={}；
返回当前应用程序；
},
单击加载表单（appId）
{
var currentApp=this.loadForm（appId）；
var state=新对象（）；
var refs=this.refs；
Object.key（refs.map）（函数（prop，index）{
状态[prop]=当前应用程序的类型[prop]=“未定义”？“”：当前应用程序[prop]；
});
console.log（状态）；
本.设置状态（状态）；
},
renderListApplications（）{
var_this=这个；
返回此.data.applications.map（函数（applicationform，i）{
返回；
});
},
handleSubmit（事件）{
event.preventDefault（）；
var refs=this.refs；
var formVals=新对象（）；
Object.key（refs.map）（函数（prop，index）{
if（refs[prop].nodeName.match（/（输入|选择|文本区域）/）.length>0）
formVals[prop]=参考[prop]。值；
});
Meteor.call（“保存应用程序”，formVals）；
},
handleChange:函数（e）{
如果（！e.target.id）返回；
if（typeof e.target.id=='undefined'）返回；
var state=新对象（）；
状态[e.target.id]=e.target.value；
本.设置状态（状态）；
},
render（）{
返回(

{this.renderListApplications（）}

{JSON.stringify（this.data.currentApplication）}
{this.state.input_38}
{this.state.input_39}
提交
);
}
});

事实上我已经猜出来了。我变了

<textarea ref="input_38" id="input_38" onChange={this.handleChange}>{this.state.input_38}</textarea>
<textarea ref="input_39" id="input_39" onChange={this.handleChange}>{this.state.input_39}</textarea>

{this.state.input_38}
{this.state.input_39}

到

太棒了！给未来读者的一个提示是：这里提到了这一点的原因。目前，我更喜欢它，因为当我第一次使用DOM时，我发现有时检查innerHTML、other times value、other times options[options.selectedIndex].value等都很不方便。。。。

<textarea ref="input_38" id="input_38" onChange={this.handleChange} value={this.state.input_38} />
<textarea ref="input_39" id="input_39" onChange={this.handleChange} value={this.state.input_39} />