Question

我是初学者，请原谅我的无知。我正在从我正在构建的更大的应用程序中发布一个组件。该组件具有handleClick函数，可在单击图像时更改状态。单击图像时，将呈现新组件。目前，无论点击哪个图像，都会渲染相同的“新组件”。我希望该组件基于点击的图像。

var AllocationDiv = React.createClass({
  getInitialState: function(){
    return {clicked: false};
  },
  handleClick: function() {
    this.setState (
    {clicked: true}
    ); 
  },
  render: function () {
    var handleFunc = this.handleClick; //because it wasn't brining this.handleClick into the render function
    var chartMap = pieCharts.map(function(prop){
      return <img onClick={handleFunc} id={prop} src={prop} />;
    }); 
    return (
      <div id='bottomSection'>
          <h2>Select Desired Asset Allocation</h2>
          <div id='pieCharts'>
            <table>
              <tr>{pieHeadMap}</tr>
            </table>
              <div>
                {chartMap}
                  <div id='test'>  
                    {this.state.clicked ? <TestComponent /> : null}
                  </div>
              </div>
            </div>
        </div>
    );
  }
});

var chartMap渲染三个图像。假设我创建了三个独特的测试组件，我将如何根据单击的图像来渲染它们？这是整个应用程序。我知道整个事情是乱七八糟的，但我正在使用它作为沙箱来学习解决问题。谢谢！ http://codepen.io/sdpercussion/pen/NRQNLv?editors=0010

Answer 1

所以，我会为此做些什么。你应该有一个字符串，而不是你的点击状态有一个布尔值。该字符串应该是被单击图像的名称。（您需要指定名称或ID或其他任何内容来区分它们）

所以..初始状态是：

getInitialState: function(){
  return {clicked:''};
},

接下来你的handleClick必须改变，你需要将图像名称/ Id传递给它。

handleClick: function(image) {
  this.setState ({
    clicked: image
  }); 
},

然后，在你的渲染中..

（请确保地图中为.bind(this)，以便在调用方法时可以使用组件范围。var self = this;类型变通方法显示对范围的误解

render: function () {

    var chartMap = pieCharts.map(function(prop){
      // pass in your image name to your callback using bind, null value here skips over the scope portion and is what you need
      return <img onClick={this.handleClick.bind(null, prop)} id={prop} src={prop} />;
    }.bind(this)); 

    // get the component you want for each specific image and save to a variable for display
    var imgVar = null;
    switch (this.state.image) {
        case 'image1':
            imgVar = <NewComponent />;
            break;
        case 'image2':
            imgVar = <DifferentComponent />;
            break;
    }

    return (
      <div id='bottomSection'>
          <h2>Select Desired Asset Allocation</h2>
          <div id='pieCharts'>
            <table>
              <tr>{pieHeadMap}</tr>
            </table>
              <div>
                {chartMap}
                  <div id='test'>  
                    {imgVar}
                  </div>
              </div>
            </div>
        </div>
    );
  }

Answer 2

您可以在<img>标记中添加动态“ID”，如下所示。因此，基于点击的图像，您可以渲染组件。

 handleClick: function() {
    //alert(event.target.id);
    if(event.target.id === "2"){
    this.setState (
    {clicked: true}
    ); }
  },
  render: function () {
    var handleFunc = this.handleClick; //because it wasn't brining this.handleClick into the render function
    var count =0;
    var chartMap = pieCharts.map(function(prop){
      count++;
      return <img onClick={handleFunc} id={count+1} src={prop} />;
    }); 
    return (
      <div id='bottomSection'>
          <h2>Select Desired Asset Allocation</h2>
          <div id='pieCharts'>
            <table>
              <tr>{pieHeadMap}</tr>
            </table>
              <div>
                {chartMap}
                  <div id='test'>  
                    {this.state.clicked ? <TestComponent /> : null}
                  </div>
              </div>
            </div>
        </div>
    );
  }
});

如何获取我的handleClick以呈现不同的组件

2 个答案: