Question

我有一个Btn组件，在该组件内部的onClick中有一些样式切换。

我想在单击按钮时向父级添加onClick以执行功能。 btn组件将被重用，因此父组件中的onClick将发生变化，而Btn组件中的onClick将始终只是切换btn样式。

class BtnParent extends React.Component {
 constructor(props) {
    super(props);
    this.alsoDoThis = this.alsoDoThis.bind(this);
  }
  alsoDoThis() {
    alert('clicked');
  }
  render() {
    return (
      <BtnFav onClick={this.alsoDoThis} />
    );
  }
};

Answer 1

您将onClick道具传给了孩子，但您从未使用过它。需要明确调用该函数：

 handleClick() {
    this.props.onClick(); // invoke it anywhere in the child
    this.setState({favorited: !this.state.favorited});
 }

Answer 2

下面的btnParent.jsx：

class BtnParent extends React.Component {
 constructor(props) {
    super(props);
    this.alsoDoThis = this.alsoDoThis.bind(this);
  }
  alsoDoThis() {
    alert('clicked');
  }
  render() {
    return (
      <BtnFav alsoDoThis={this.alsoDoThis} />
    );
  }
};

btnFav.jsx如下：

class BtnFav extends React.Component {
  render() {
    return (
      <button onClick={this.props.alsoDoThis} />
    );
  }
};

可以解决它！

父级和子级之间的组件通信，您可以使用react props传递function，但是当两个组件不是父/子时，您可以使用一些事件发布/订阅lib。例如https://github.com/hustcc/onfire.js

Answer 3

试试这个，

   class BtnFav extends React.Component {
      render() {
        return (
          <button onClick={()=>this.props.alsoDoThis()} />
        );
      }
    };

React - Btn组件中的onClick处理程序和父

3 个答案: