Question

我的父组件有两个独立的事件处理程序，用于从子组件收集数据。

class MyComponent extends React.Component{
  ...

  handleClick(data1){
    console.log(data1);

  }

  handleSubmit(data2){
    console.log(data);
    method(data1, data2)
  }

}

在我的handleSubmit处理程序中我想调用一个方法来发布两个数据对象。如何访问data2处理程序中的data1？

Answer 1

在创建React类并定义方法时，如果要访问预定义方法（handleClick），就像使用this.setState({})一样，只需编写this.handleClick即可。 this关键字指的是此上下文中的类。

 class MyCompnonent extends React.Component{

handleClick(data){
    this.setState({
     data1: data
    });
    console.log(data1);

 }

  handleSubmit(data2){
    console.log(data);
    this.method(this.state.data1, data2);
  }

}

Answer 2

如果您的数据值是通过其他组件（父级）传递的，那么它会通过道具传递，并且可以通过this.props访问，以防其值不会更改，否则您可能会需要通过组件状态保存您的数据值data1和data2，如下所示：

handleClick(data1){
   this.setState({data1});
 }

 handleSubmit(data2){
   this.setState({data2});
   method(this.state.data1, this.state.data2)
 }

在React中确定数据范围

2 个答案: