将数据单击事件传递到循环中的函数

Question

我以这种方式在父组件中创建我的组件：

renderRow(row){
  var Buttons = new Array(this.props.w)
  for (var i = 0; i < this.props.w; i++) {
    var thisButton=<FieldButton handler={this.actionFunction} key={'row'+ row +'col'+ i}></FieldButton>
    Buttons.push(thisButton)
  }
  return Buttons
}
renderField(){
  var Field = new Array(this.props.h);
  for (var i = 0; i < this.props.h; i++) {
    var row = this.renderRow(i);
    Field.push(<View key={i} style={styles.fieldWrap}>{row}</View>);
  }
  this.setState({field: Field})
}

目标：

我必须更改fieldbutton组件的状态。

我的问题：

更改Childs组件状态的正确方法是什么？

首次尝试：

我试图将一个道具绑定到父部件的状态：

 <FieldButton color={this.state.color} handler={this.actionFunction} key={'row'+ row +'col'+ i}></FieldButton>

我还实现了componentWillReceiveProps方法，但从未被调用。

我试图将孩子移出for循环，并且起作用。

第二次尝试：

我尝试使用参考：这个问题。

Answer 1

在您的情况下，问题似乎是由于关闭而引起的。您应该使用let进行for循环，否则每次forloop都会在您的renderrow案中使用 this.props.h.length - 1和similary调用 this.renderRow(i)

renderRow(row){
  var Buttons = new Array(this.props.w)
  for (let i = 0; i < this.props.w; i++) {
    let thisButton=<FieldButton handler={this.actionFunction} key={'row'+ row +'col'+ i}></FieldButton>
    Buttons.push(thisButton)
  }
  return Buttons
}
renderField(){
  var Field = new Array(this.props.h);
  for (let i = 0; i < this.props.h; i++) {
    let row = this.renderRow(i);
    Field.push(<View key={i} style={styles.fieldWrap}>{row}</View>);
  }
  this.setState({field: Field})
}

之后，由于您的父组件已经持有状态，您可以将其传递为Props，然后实现componentWillReceiveProps。

P.S。但是，如果您的子部分状态直接从 道具，您应该直接使用道具，而不是保留本地 儿童状态