Javascript ReactJS-如何基于另一个组件更改组件的状态

当不同组件的状态发生变化时，我试图更新组件的状态

以下是包含表单的主要组件：

class IpsumForm extends React.Component {
  state = {
    character: 'All',
    paragraphs: 1,
    ipsumDisplayed: false
  };

  handleInputChange = (e) => {
    const target = e.target;
    this.setState({ paragraphs: target.value });
  };

  handleSelectChange = (e) => {
    const target = e.target;
    this.setState({ character: target.value });
  };

  handleReset = (e) => {
    this.setState({
      character: 'All',
      paragraphs: 1,
      ipsumDisplayed: false
    });
  };

  handleSubmit = (e) => {
    e.preventDefault();
    this.setState({
      ipsumDisplayed: true
    });
  };

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <p>Select Your Character:</p>
          <select
            value={this.state.character}
            onChange={this.handleSelectChange}
            name="characterPick"
          >
            <option value="All">All</option>
            <option value="Michael">Michael</option>
            <option value="Dwight">Dwight</option>
            <option value="Jim">Jim</option>
            <option value="Andy">Andy</option>
            <option value="Creed">Creed</option>
          </select>
          <div className="length">
            <p>How Many Paragraphs?</p>
            <input
              onChange={this.handleInputChange}
              name="paragraphLength"
              type="text"
            />
          </div>
          <hr />
          <input
            id="submit"
            type="submit"
            value="Bibity Boppity Give Me The Zoppity"
          />
          <button onClick={this.handleReset}>Reset</button>
        </form>
        <br />
        <IpsumText
          person={this.state.character}
          length={this.state.paragraphs}
          displayed={this.state.ipsumDisplayed}
        />
      </div>
    );
  }
}

export default IpsumForm;

下面是我想在文本框中返回ipsum的组件：

class IpsumText extends React.Component {
  state = {
    value: ''
  };

  handleValueChange = (e) => {
    console.log(data.quote1);
    this.setState({
      value: data.quote1
    });
  };

  render() {
    let character = this.props.person;
    let paragraphs = this.props.length;
    let displayed = this.props.displayed;

    return (
      <div className="returned-ipsum">
        <textarea value={this.state.value} onChange={this.handleValueChange} />
      </div>
    );
  }
}

export default IpsumText;

我现在的代码不起作用，因为IpsumForm的状态更改不会导致textareaonchange处理程序在IpsumText中运行

---

我想知道除了使用生命周期方法之外，是否还有其他方法可以做到这一点，因为我似乎只是想得太多了

类应用程序扩展了React.Component{ 状态={ 第一州：1， } handleStateUpdate==>{ this.setstateprov=>{ firstState:prev.firstState+1 } } 渲染{ console.logthis.state.firstState 回来 } } 类Foo扩展了React.Component{ 状态={ 其他国家：1， } handleLocalStateUpdate==>{ 此.props.handlestate更新 this.setstateprov=>{ otherState:prev.otherState+1 } } 渲染{ 返回此。handleLocalStateUpdate}>单击此处！ } } ReactDOM.render，document.getElementById'app'

---

您可以尝试探索redux。其思想是，将任何组件连接到一个集中式存储，并在您现在的代码无法工作的任何地方使用该状态，因为它背后的逻辑完全不正确。您需要实现什么？你能描述一下吗？是的，我知道逻辑是混乱的，但我想发生的是当我从IpsumForm提交表单时，这将改变我的IpsumText的状态以显示报价。但是当我提交表单时，我不知道如何从不同的组件触发状态更改。这有意义吗？我想我需要把我的“值”状态放到IpsumForm中，然后把它传递给IpsumText？