如何从子组件到父组件获取状态数据？

Question

我有两个组件，TabTble和MultiSelect。 我正在TabTble中渲染MultiSelect组件，因此父组件是TabTble，子组件是MultiSelect。 我的孩子（MultiSelect）组件中有一些状态，如何在TabTble组件中获取它。

const selectedData = this.state.multi;这是状态数据

const {selectedData } = this.props以此方式作为道具传递

<MultiSelect selectedData ={ selectedData } />并将其呈现在子组件中。

Answer 1

在组件之间共享状态变量的正确方法是通过redux存储。主要优点是，如果您只有两个以上的组件，那么您可以在所有组件中使用存储状态，并通过分派操作对其进行修改，这将再次使修改后的状态可用于所有组件。

Answer 2

假设您具有以下两个组成部分，您可以这样做：

class TabTble extends Component  {
handleChildData = (fromMultiSelectData) => {
//Do whatever you want to do from this child data
}
return (
<MultiSelect selectedData ={ selectedData } handleChildData = {this.handleChildData}/>
);
}

MultiSelect组件中的wherease：

class MultiSelect extends Components {
   state = {
    localData:[] //local state data which we want to send to parent components
}
handleClick = () => {
let {localData} = this.state;
this.props.handleChildData(localStateData)
}
render(){
let {selectedData} = this.props;
return(
somechild
//Note you need some event handler like onChange,onClick to pass this data up
<div onClick={this.handleClick}>Send Data to parent</div> //you can pass any other data from here
)
}
}

//请注意，在设计反应代码时此设计模式不好。当您进行此类prop细化或使用良好的状态管理（上下文api或redux）时，始终建议使用它。

Answer 3

我认为您应该更改一下代码。将要更改的州放在“父母”中，并将其作为道具传递给孩子，在孩子中，您可以更改状态。

如果您不使用Redux，我认为这是正确的方法。

看那个例子：