如何在react.js中从父组件覆盖子组件的事件处理函数

IT技术 event-handling reactjs
2021-05-09 16:55:37 
/** @jsx React.DOM */

var Button = React.createClass({
  handleClick: function(){
    console.log(' FROM BUTTON')
  },
  render: function() {
    return <input type='button' onClick={this.handleClick} value={this.props.dname}/>;
  } 
});

var Text = React.createClass({
  render: function() {
    return <input type='text' onClick={this.handleClick} value={this.props.ival}/>;
  } 
});


var search = React.createClass({
  handleClick: function() {
    console.log('searching')
  },
  render: function(){
    return (
      <div>
        <Text/>
        <Button dname={this.props.dname} onClick={this.handleClick} />
      </div>
    );
  }
});

React.renderComponent(<search dname='Look up' fname='Search'/> , document.body);

我已经创建了一个按钮和文本组件并将它们包含在一个搜索组件中，现在我想用搜索组件的处理程序覆盖按钮的默认 handleClick 事件。但是 this.handleClick 指向按钮组件的事件处理程序 .. 请帮忙.. 我需要从 SEARCH 点击而不是从按钮..

3个回答

你有百分之九十九。

React 使用单向数据流。因此，嵌套组件上的事件不会传播到它们的父级。

您必须手动传播事件

更改您的<Button>shandleClick函数以调用this.props.handleClick从<Search>其父级传入的函数：

var Button = React.createClass({
  handleClick: function () {
    this.props.onClick();
  },

  ...

});

附件是您原始帖子的小提琴，并进行了所需的更改。FROM BUTTON它现在将发出警报，而不是记录searching。

http://jsfiddle.net/chantastic/VwfTc/1/

您需要更改Button组件以允许此类行为：

var Button = React.createClass({
  handleClick: function(){
    console.log(' FROM BUTTON')
  },
  render: function() {
    return (
      <input type='button'
        onClick={this.props.onClick || this.handleClick}
        value={this.props.dname} />
    );
  }   
});

请注意onClick={this.props.onClick || this.handleClick}.

这样，如果您onClick在实例化时传递一个prop，Button它将优先于Button'shandleClick方法。

或者，如果您可以同时执行它们，则可以将

class Button extends React.Component {


handleClick = () => {
console.log("from buttom");

if (this.props.hasOwnProperty('onClick')){
   this.props.onClick();
}

};

您将检查对象是否具有指定的属性并运行它

其它你可能感兴趣的问题
上一篇将 next.js 与纱线工作区结合使用 下一篇如何使用 useEffect 的异步返回值作为 useState 中的默认值？