Question

我是React的新手，在使用和输出某些输出时，我会尝试修改数据流。

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

我有一个组件输入

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

组件输出

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

封装在只是App

的父组件中

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>
    );
  }
}

但是Output组件似乎没有从父组件中读取value。我还质疑这是否是正确的方式。将数据存储在父组件中而不是单个组件本身。

将输入链接到React中的输出

0 个答案: