Reactjs 将输入链接到React中的输出

我是一个新手，在使用数据流和某种输出时，我会尝试对数据流稍加修改

其想法是在输入栏中键入内容，并在用户键入时将其显示在输入栏下方。我希望这样做没有像通量或Redux的东西请。只是一件简单的小事，让我熟悉数据流

我有一个组件输入

class Input extends Component {
  render() {
    return (
      <input value={this.props.inputValue} onChange={this.props.onChange} />
    );
  }
}

类输入扩展组件{
render（）{
返回(
);
}
}

和组件输出

class Output extends Component {
  render() {
    return (
      <p>
        {this.props.dataSource}
      </p>
    );
  }
}

类输出扩展组件{
render（）{
返回(

{this.props.dataSource}

);
}
}

封装在仅为应用程序的父组件中

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: ''
    };
    this.onChange = this.onChange.bind(this);
  }

  onChange(event) {
    this.setState({
      value: event.target.value,
    });
  }

  render() {
    return (
      <div>
        <Input inputValue={this.state.value} onChange={this.onChange} />
        <Output dataSource={this.state.value} />
      </div>
    );
  }
}

类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
值：“”
};
this.onChange=this.onChange.bind（this）；
}
onChange（事件）{
这是我的国家({
值：event.target.value，
});
}
render（）{
返回(
);
}
}

但是输出组件似乎没有从父组件读取

值。
我还怀疑这是否是正确的方法。将数据存储在父组件中，而不是单个组件本身。
因此，要回答您的一个问题，是的，您确实希望将数据存储在父组件上。通过这种方式，您可以在子组件之间传递数据，并且在更新控制其自身状态的组件时不必担心副作用。这种模式被称为“提升状态提升”，请在这里查看我复制粘贴了您的确切代码的反应文档，它对我来说很好。浏览器控制台中是否有错误？这里有一个链接，链接到一个使用你的代码的工作示例，它对我也适用，在这里是怪异的。它现在似乎也起作用了。一定是搞砸了什么。感谢Brett提供的有关该模式的链接。