通过父级更改同级状态

Question

我的反应结构是

- App
   |--SelectStudy
   |--ParticipantsTable

在SelectStudy中有一个按钮，单击该按钮可通过App家长向其兄弟姐妹ParticipantsTable发送消息。第一个孩子-

应用程序

class App extends Component { 

  myCallback(dataFromChild) {
      // This callback receives changes from SelectStudy Child Component's button click
      // THIS WORKS
      alert('SelectStudy Component sent value to Parent (App): ' + dataFromChild.label + " -> " + dataFromChild.value);
      // QUESTION: How to Update State of ParticipantsTable (SelectStudy's Sibling) next?
      // ........................................................
  }

  render() {
      return (
          <div className="App">
             <SelectStudy callbackFromParent={this.myCallback}></SelectStudy>
             <ParticipantsTable></ParticipantsTable>
          </div>
      );
}

选择研究

class SelectStudy extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            error: null,
            isLoaded: false,
            items: [],
            selectedStudy: null, 
            isButtonLoading: false
        };
        this.handleButtonClick = this.handleButtonClick.bind(this);
    }

    render() {
        const { error, isLoaded, items, itemsForReactSelect, selectedStudy, isButtonLoading } = this.state;
        return <Button onClick={this.handleButtonClick}>Search</Button>;
    }

    handleButtonClick = () => {
        this.props.callbackFromParent(this.state.selectedStudy);
    }

}

参与者表-这需要接收某个变量，例如在其状态中的研究

class ParticipantsTable extends React.Component {
    constructor(props) {
        //alert('Constructor');
        super(props);
        // Initial Definition of this component's state
        this.state = {
            study: null,
            items: [], 
            error: null
        };
    }

    // THIS METHOD IS AVAILABLE, BUT HOW TO CALL IT FROM App's myCallback(dataFromChild)?
    setStudy = (selectedStudy) => {
        this.setState({study: selectedStudy});
    }    

    render() {
        return ( <div>{this.state.study}</div> );
    }
}

Answer 1

我认为你需要理解的是state和props之间的区别。

状态是组件的内部状态，而道具则从父级传递给子级

这里有一个深入的答案

因此，您希望在父级中设置一个状态，您可以将其作为道具传递给子级

1在父级中设置状态

 this.state = {
  value: null
 }

 myCallback(dataFromChild) {
    this.setState({value: dataFromChild.value})

  }

把它作为道具传给孩子们

class ParticipantsTable extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            study: props.study,
            items: [], 
            error: null
        };
    }

另外，尽管与您的问题无关，但如果您正在学习React，我建议您放弃基于类的组件，转而使用挂钩和功能组件，因为它们最近已经得到了更广泛的使用和流行。

Answer 2

状态应该明确地存在于App级别，而不是子级别。国家需要生活在需要获得它的最低公分母之上。因此，如果SseltResearch和参与者表都需要访问相同位的状态数据，那么它必须生活在它们最接近的共同祖先（或以上）中。

这是React的核心概念，称为“提升状态”，在React官方文档中有自己的页面。

在你的情况下，它看起来像这样。注意状态如何只存在于一个地方，位于

import React from 'react';

class App extends React.Component {
  // State lives here at the closest common ancestor of children that need it
  state = {
    error: null,
    isLoaded: false,
    items: [],
    selectedStudy: null,
    isButtonLoading: false
  };

  myCallback = (dataFromChild) => {
    this.setState(dataFromChild);
  };

  render() {
    return (
      <div className="App">
        {/* State is passed into child components here, as props */}
        <SelectStudy data={this.state} callbackFromParent={this.myCallback}></SelectStudy>
        <ParticipantsTable study={this.state.selectedStudy} />
      </div>
    );
  }
}

class SelectStudy extends React.Component {
  handleButtonClick = () => {
    // Here we execute a callback, provided by <App />, to update state one level up
    this.props.callbackFromParent({ ...this.props.selectedStudy, isButtonLoading: true });
  };

  render() {
    const { error, isLoaded, items, itemsForReactSelect, selectedStudy, isButtonLoading } = this.props.data;

    return <Button onClick={this.handleButtonClick}>Search</Button>;
  }
}

// This component doesn't need to track any internal state - it only renders what is given via props
class ParticipantsTable extends React.Component {
  render() {
    return <div>{this.props.study}</div>;
  }
}