Question

我有一个与Redux连接到商店的容器组件（称为“ App”）。该组件呈现2个（以及其他）名为“ Tab”和“ SaveButton”的组件。 “ SaveButton”的作用是onClick，它调用一个this.handleSave(this.state.data)函数，该函数将来自data的一些state作为参数传递。但是另一个组件“ Tab”正在本地设置所有数据。总体情况是这样的：

[App.js]

//imports, constructor, etc...

this.handleSave = data => {
    const { saveAction } = this.props
    saveAction(this.state.data)
}

render() {
    return(<>
        <Tab someProps>

        <Other components that has handles functions that sets data on this.state.data>

        <SaveButton onClick={this.handleSave}>
    </>)
}

[Tab.js]

//imports, contructor, etc...

A lot of `onClick={this.handleChange}` functions that sets states locally from Inputs, selects, radio buttons, etc.

那么，如何保存<Tab>和this.state.data中的数据并将其与<Other components>一起设置，以便保存来自<Tab>和<App getData={this.getData} >的数据？

编辑：我试图将道具作为一种功能从父母传递给孩子：

onClick

但是现在我可以在儿童中使用那个道具吗？触发保存功能事件的\b在父级中，而不在子级中，因此我不知道如何在子级中使用该道具。我尝试了某些状态更改，例如componentDidUpdate中的更改，但是这导致了循环。我当时正在考虑在组件的每个handleChange上使用该道具，但是我想知道是否有更好的解决方案可以一次操作地从

检索所有状态。

Answer 1

我将以以下两种方式之一进行处理：

1：将Tab组件设为“受控”组件，其中App存储Tab中使用的状态，并将值和更改处理程序向下传递到Tab，即：

this.onTabValueChange = (tabValue) => {
  this.setState({
    tabValue,
  });
}
...
render() {
  <Tab
    tabValue={this.state.tabValue}
    onTabValueChange={this.onValueAChange}
  />
}
...

2：将Tab组件连接到redux-通过redux的connect或从App传递set操作。

本质上，App需要访问Tab中的值，因此它应该作为父级拥有它们，或者redux应该拥有它们并在App和{{1}之间共享它们}在树外。

ReactJS，不带孩子的父母的getdata和来自孩子的父母的

1 个答案: