Question

假设以下组件：

class App extends Component {
  constructor(props){
    super(props);
  }

  func1 = () => {
  ....
    }

  func2 = () => {
  ...
    }

  render() {
    return (
       <div>
          <Component
            activity={this.func1}
           />
      </div>
    );
  }
}

如何从Component函数内部实现onClick事件，以便主App中的结果为：

 <div>
   <Component
     activity={this.func2}
   />
 </div>

Answer 1

正常流程如下

class App extends Component {
  constructor(props){
    super(props);
  }

  func1 = () => {
  ....
    }

  func2 = () => {
  ...
    }

  render() {
    return (
       <div>
          <Component
            activity={this.func1}
           />
      </div>
    );
  }
}


<div>
   <Component
     activity={this.props.activity(arguments)}
   />
 </div>

并且执行此操作将使活动prop调用父组件中定义的func1。

注意： - 理想情况下，您应该将一个函数称为事件的prop而不仅仅是普通属性

如何使用React中的onClick事件更改属性值

1 个答案: