Question

我有 handleClick 功能，只需console.logs initIndex 状态。我希望它也适用于 SecondComponent div。目前，即使我在 SecondComponent 中有 handleClick 功能，它也不会触发事件。

理想情况下，我不想在 SecondComponent 中再次重复 handleClick 功能。我错过了什么？

我还是很新的反应，让我感到困惑。

var PlayAppComponent = React.createClass({
  getInitialState : function(){
        return {
          initIndex : true
        };
      },

      handleClick: function() {
        console.log("is "+ this.state.initIndex)
      },  

     render: function(){
        return (
          <div>
          <h2 className="visible" onClick={this.handleClick}>TRUE</h2>
          <SecondComponent />
          </div>
        );
      }

    });
var SecondComponent = React.createClass({
  getInitialState : function(){
    return {
      initIndex : true
    };
  },

  render: function(){
    return (
      <div>
        <h2 className="visible" onClick={this.handleClick}>TRUE</h2>
      </div>
    );
  }

});

ReactDOM.render(
  <PlayAppComponent />,
  document.getElementById('app')
);

非常感谢任何帮助。谢谢萌

Answer 1

您尚未在第二个组件中添加句柄点击方法。试试下面的代码。

var PlayAppComponent = React.createClass({
getInitialState : function(){
    return {
      initIndex : true
    };
  },

  handleClick: function() {
    console.log("is "+ this.state.initIndex)
  },  

  render: function(){
    return (
      <div>
      <h2 className="visible" onClick={this.handleClick}>TRUE</h2>
      <SecondComponent />
      </div>
    );
  }

});
var SecondComponent = React.createClass({
getInitialState : function(){
return {
  initIndex : true
};
},
 handleClick: function() {
    console.log("is "+ this.state.initIndex)
 },  
 render: function(){
  return (
  <div>
    <h2 className="visible" onClick={this.handleClick}>TRUE</h2>
   </div>
   );
   }

 });

 ReactDOM.render(
 <PlayAppComponent />,
 document.getElementById('app')
 );

Answer 2

将句柄函数作为属性传递给第二个组件，然后在onclick处理程序上调用该函数，如下所示

var PlayAppComponent = React.createClass({
  getInitialState : function(){
    return {
      initIndex : true
    };
  },

  handleClick: function() {
    console.log("is "+ this.state.initIndex)
  },  

 render: function(){
    return (
      <div>
      <h2 className="visible" onClick={this.handleClick}>TRUE</h2>
      <SecondComponent handleClick={this.handleClick}/>
      </div>
    )};
  }

});
var SecondComponent = React.createClass({
   getInitialState : function(){
     return {
          initIndex : true
     };
    },
   handleClick: function() {
     this.props.handleClick();
   },  
   render: function(){
     return (
        <div>
           <h2 className="visible" onClick={this.handleClick}>TRUE</h2>
        </div>
     );
    }

});

ReactDOM.render(
  <PlayAppComponent />,
  document.getElementById('app')
);

Answer 3

你可以在SecondComponent中使用this.props.handleClick

在SecondComponent中删除getInitialState

var PlayAppComponent = React.createClass({
  getInitialState : function(){
    return {
      initIndex : true
    };
  },

  handleClick: function() {
    console.log("is "+ this.state.initIndex)
  },  

 render: function(){
    return (
      <div>
      <h2 className="visible" onClick={this.handleClick}>TRUE</h2>
      <SecondComponent handleClick={this.handleClick} />
      </div>
    )};
  }

});
var SecondComponent = React.createClass({
   render: function(){
     return (
        <div>
           <h2 className="visible" onClick={this.props.handleClick}>TRUE</h2>
        </div>
     );
    }

});

ReactDOM.render(
  <PlayAppComponent />,
  document.getElementById('app')
);

React.js如何将onClick函数应用于所有组件div

3 个答案: