Javascript Antipatern react-从其他组件获取值

我是react的新手，我只是想知道从另一个组件中创建的组件获得价值的最佳解决方案是什么，这将是反模式的。我有这2个组件-mainComponent有变量，带有图片链接，我刚刚创建了图片，并保存了图片表中的索引值。在画布中，我正在渲染此图像。我只想保存点击图像的索引，创建从img对象返回值的函数将是一个很好的解决方案？或者它是antipatern，我应该尝试另一种方法来实现它

class MainComponent扩展了React.Component{
构造函数（）{
超级（）；
this.imageCol=['link'，'link']
这个州={
索引图像：0，
};
} 
render（）{
返回(
{this.imageCol.map（（e，index）=>{
返回
})}
);
}
}
类映像扩展了React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
);
}
}
导出默认图像

您只需将一个函数传递给

Image

组件的

onclick

。这不是反模式。事实上，应该这样做

constructor(){
    ...
  } 
  clickHandler(index){
     console.log("index of the clicked image = "+index)
  }
  render() {

    return (
      <div>
        <div>
          {this.imageCol.map((e,index) => {
            // pass a function as a prop like this
            return <Image onClick={this.clickHandler.bind(this,index)} value ={index} source={this.imageCol[index]} key={index} style={this._returnState(index)} />
          })}
        </div>
        <div>
          <ReactCanvas image={this.imageCol[this.state.indexOfImage]}/>
        </div>
      </div>
    );
  }

---

只需将函数传递给

Image

组件的

onclick

。这不是反模式。事实上，应该这样做

constructor(){
    ...
  } 
  clickHandler(index){
     console.log("index of the clicked image = "+index)
  }
  render() {

    return (
      <div>
        <div>
          {this.imageCol.map((e,index) => {
            // pass a function as a prop like this
            return <Image onClick={this.clickHandler.bind(this,index)} value ={index} source={this.imageCol[index]} key={index} style={this._returnState(index)} />
          })}
        </div>
        <div>
          <ReactCanvas image={this.imageCol[this.state.indexOfImage]}/>
        </div>
      </div>
    );
  }

---

您应该向

Image

组件传递一个函数，当用户单击图像时将调用该函数，并更新

main组件中的状态。像这样：

class MainComponent extends React.Component {

  constructor(){
    super();
    this.imageCol = ['link','link']
    this.state={
        indexOfImage : 0,
    };
  } 

  updateImageIndex(newIndex) {
    this.setState({indexOfImage: newIndex});
  }

  render() {

    return (
      <div>
        <div>
          {this.imageCol.map((e,index) => {
            return <Image onClick={this.updateImageIndex.bind(this)} value={index} source={e} key={index} style={this._returnState(index)} />
          })}
        </div>
        <div>
          <ReactCanvas image={this.imageCol[this.state.indexOfImage]}/>
        </div>
      </div>
    );
  }
}

我们将传递给
图像
（React组件）的
onClick
属性设置为
onClick
事件处理程序。这样，当用户单击image DOM元素时，将调用
updateImageIndex
函数，并从
MainComponent
更新状态。您应该将函数传递给
图像
组件，当用户单击图像时将调用该函数并更新
MainComponent
中的状态。像这样：

class MainComponent extends React.Component {

  constructor(){
    super();
    this.imageCol = ['link','link']
    this.state={
        indexOfImage : 0,
    };
  } 

  updateImageIndex(newIndex) {
    this.setState({indexOfImage: newIndex});
  }

  render() {

    return (
      <div>
        <div>
          {this.imageCol.map((e,index) => {
            return <Image onClick={this.updateImageIndex.bind(this)} value={index} source={e} key={index} style={this._returnState(index)} />
          })}
        </div>
        <div>
          <ReactCanvas image={this.imageCol[this.state.indexOfImage]}/>
        </div>
      </div>
    );
  }
}

我们将传递给
图像
（React组件）的
onClick
属性设置为
onClick
事件处理程序。这样，当用户单击image DOM元素时，将调用
updateImageIndex
函数，并从
main组件更新状态
您可以将
onClick
事件回调道具传递给
image
尝试此操作，但不幸的是，我没有看到单击的任何响应。这很可能是因为它不是本地dom组件（我想是的）你能用你如何做的代码更新你的帖子吗？你可以将
onClick
事件回调道具传递给
Image
尝试了这一点，但不幸的是，我没有看到点击的任何反应。这很可能是因为它不是本地的dom组件（我想是的）你能用你怎么做的代码来更新你的帖子吗？我问了这个问题后才意识到，但谢谢你的回答：）小修正：
this.clickHandler.bind（this.index）
应该是
this.clickHandler.bind（this，index）
@RickJolly是的。完成。我问了这个问题后才意识到，但谢谢你的回答：）小补丁：
this.clickHandler.bind（this.index）
应该是
this.clickHandler.bind（this，index）
@RickJolly是的。完成。