React 的单向数据绑定模型意味着子组件不能将值发送回父组件，除非明确允许这样做。React 这样做的方法是将回调传递给子组件（请参阅Facebook 的“表单”指南）。

class Parent extends Component {
  constructor() {
    this.state = {
      value: ''
    };
  }
  
  //...
  
  handleChangeValue = event => this.setState({value: event.target.value});
  
  //...
  
  render() {
    return (
      <Child
        value={this.state.value}
        onChangeValue={this.handleChangeValue}
      />
    );
  }
}

class Child extends Component {
  //...
  
  render() {
    return (
      <input
        type="text"
        value={this.props.value}
        onChange={this.props.onChangeValue}
      />
    );
  }
}

注意父组件处理状态，而子组件只处理显示。Facebook 的“提升状态”指南是学习如何做到这一点的好资源。

这样，所有数据都存在于父组件中（处于状态），而子组件只能更新该数据（作为 props 传递的回调）。现在您的问题解决了：您的父组件可以访问它需要的所有数据（因为数据存储在状态中），但是您的子组件负责将数据绑定到它们自己的单个元素，例如<input>标签。

附录

对此评论的回应：

如果我们渲染子组件的列表怎么办？在提升状态技术中使用这个单一的事实来源会让父级控制所有子级输入的所有状态，对吗？那么我们如何从父组件访问子组件中的每个值输入（呈现为列表）？

对于这种情况，您可以为列表中的每个元素映射一个子组件。例如：

class Parent extends Component {
  //...
  handleChangeListValue = index => event => {
    this.setState({
      list: this.state.list
        .map((element, i) => i === index ? event.target.value : element)
    });
  }
  //...
  render() {
    return this.state.list.map((element, i) => (
      <Child
        value={element}
        onChangeValue={this.handleChangeListValue(i)}
      />
    ));

PS免责声明：以上代码示例仅用于说明所讨论的概念（Lifting State Up），并反映回答时 React 代码的状态。关于代码的其他问题，例如不可变与可变数组更新、静态与动态生成的函数、有状态与纯组件以及基于类与基于钩子的有状态组件，最好将其作为一个单独的问题提出。

父.js

import React, { Component } from 'react';
import Child from './child'
class Parent extends Component {
  state = {
    value: ''
  }
  onChangeValueHandler = (val) => {
    this.setState({ value: val.target.value })
  }
  render() {
    const { value } = this.state;
    return (
      <div>
        <p> the value is : {value} </p>
        <Child value={value} onChangeValue={this.onChangeValueHandler} />
      </div>
    );
  }
}

export default Parent;

儿童.js

  import React, { Component } from 'react';
  class Child extends Component {
  render() {
  const { value , onChangeValue } = this.props;
  return (
    <div>
      <input type="text"  value={value} onChange={onChangeValue}/> 
    </div>
  );
}
}
  export default Child;

你可以看到一个活生生的例子：https : //codesandbox.io/s/two-way-binding-qq1o1?from-embed

您可以在 InputField 中添加一个“ref name”，以便您可以从中调用一些函数，例如：

<InputField 
   ref="userInput"
   labelClass = "label"
   labelText = "Username"
   inputId = "signUp_username"
   inputType = "email"
   inputPlaceholder = "registered email"
   inputClass = "input" />

所以你可以使用 refs 访问它：

this.refs.userInput.getUsernamePassword();

getUsernamePassword 函数将在 InputField 组件内的位置，通过返回，您可以设置状态并调用您的 props.handleSignUp