react.js - 想要把两个表格里的数据封装到数组里，怎么写

问题描述

问 题

var tables = [];
for (var i = 0;i<this.state.count;i++){
  tables.push(<Table key={i}} saveFormData={this.saveFormData.bind(null,i)}/>)
         }
return {tables}  


saveFormData(e,i){
var k = e.target.name;
var v = e.target.value;
this.state.formData[i][k] = v;
}      
         

声明了一个table数组，每点击一个按钮就添加一个表格，这是我的Tables组件。

var Table = React.createClass({
     getInitialState(){
         return{}
     },
     render(){
         return(
             <table className="modal-table task_detail margin-updown">
                 <tr>
                     <td><span>称呼</span><input type="text" name="linkmanName" placeholder="请填写称呼" onChange={this.props.saveFormData}/></td>
                     <td><span>职位</span><input type="text" name="job" placeholder="请填写职位" onChange={this.props.saveFormData}/></td>
                 </tr>
             </table>)
     }
 })

我想子控件Table通过调用父控件的方法来保存数据到state中，请问这种方法为什么会出错呢

解决方案

你的代码有三个问题：

• 首先，bind的第一个参数不能是null。因为你saveFormData并不是箭头函数，所以bind的第一个参数必须是this。否则在saveFormData方法里面，this会是window，而不是组件
  之前判断出错，这里不是一个问题，由于React的ES5写法会对组件内部的方法进行绑定，所以这里用null完全没有问题。如果是ES6的写法，那么需要bind(this)。

• 然后，你既然通过this.saveFormData.bind(this,i)来绑定了i，那么i就应该是第一个参数,e才是第二个参数

• 最后，React的state不能直接被改变。这是错误的用法。而是应该通过setState来更新state，所以你的saveFormData方法应该修改一下：

getInitialState(){
  return{
    count:1,
    formData:[]
  }
},

saveFormData(i, e){
    var k = e.target.name;
    var v = e.target.value;
    var formData = this.state.formData;
    
    if(!formData[i]) formData[i] = {};
    
    formData[i][k] = v;
    
    this.setState({formData});
}

这篇关于react.js - 想要把两个表格里的数据封装到数组里，怎么写的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！