Question

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

＆＃13;

 class MainComponent extends React.Component {
  
  constructor(){
    super();
    this.imageCol = ['link','link']
    this.state={
        indexOfImage : 0,
    };
  } 
  render() {

    return (
      <div>
        <div>
          {this.imageCol.map((e,index) => {
            return <Image value ={index} source={this.imageCol[index]} key={index} style={this._returnState(index)} />
          })}
        </div>
        <div>
          <ReactCanvas image={this.imageCol[this.state.indexOfImage]}/>
        </div>
      </div>
    );
  }
}

class Image extends React.Component {
  
  constructor(props){
    super(props);
  }

  render() {
    return (
      <img value ={this.props.value} onClick={ ()=>{console.log('click'+this.props.value)} } className={this.props.style} src={this.props.source}/>
    );
  }
}

export default Image;

＆＃13;

Answer 1

您只需将功能传递给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>
    );
  }

然后在图像组件中，只需调用传递给它的onclick函数作为prop

render() {
    return (
      <img value ={this.props.value} onClick={this.props.onClick} className={this.props.style} src={this.props.source}/>
    );
  }

Answer 2

您应该将函数传递给Image组件，当用户点击图片并更新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>
    );
  }
}

请注意，在MainComponent我创建了一个新功能updateImageIndex()，并将其作为onClick道具传递给Image组件。现在，在Image组件内：

class Image extends React.Component {

  constructor(props){
    super(props);
  }

  render() {
    return (
      <img value={this.props.value} onClick={ () => {this.props.updateImageIndex(this.props.value)} } className={this.props.style} src={this.props.source}/>
    );
  }
}

我们将传递给onClick（React Component）的Image道具设置为<img> onClick事件处理程序。这样，当用户点击图像DOM元素时，将调用updateImageIndex函数并从MainComponent更新状态。

反反应 - 从其他组件获得价值

2 个答案: