将onClick事件的数据传递给循环中的函数

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组件状态的正确方法是什么？

第一次尝试：

我试图将prop绑定到父组件的状态：

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

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

我试图将孩子移到for循环之外并且它有效。

第二次尝试：

我试图使用refs：this question.

Answer 1

您的情况下的问题似乎是由于关闭造成的。你应该使用let作为for循环，否则每次forLoop都会在你的renderRow情况下用this.renderRow(i)和类似的方式调用this.props.h.length - 1

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})
}

在此之后，您的父组件已经保持状态，您可以将其作为道具传递，然后实现componentWillReceiveProps。

附：但是，如果您的子组件状态可以直接从props派生，则应直接使用props而不是将子状态保存在子项中