Javascript 从TextInput获取值并传递给祖父母和孩子

我是个新手，我的组件结构是这样的

MainScreen > LoginScreen  > Form         > UserInput
                          > ButtonSubmit  

每一个都是一个组件 这是表单组件

 export default class Form extends Component {
  constructor(props) {
     super(props);
     this.state = {
     };
   }

render() {
 return (
  <KeyboardAvoidingView behavior="padding" style={styles.container}>
    <UserInput
      source={usernameImg}
      placeholder="Username"
      autoCapitalize={'none'}
      returnKeyType={'done'}
      autoCorrect={false}
    />
    <UserInput
      source={passwordImg}
      placeholder="Password"
      returnKeyType={'done'}
      autoCapitalize={'none'}
      autoCorrect={false}
    />
     </KeyboardAvoidingView>
  );
 }
}

导出默认类表单扩展组件{
建造师（道具）{
超级（道具）；
此.state={
};
}
render（）{
返回(
);
}
}

这是UserInput组件，我两次调用UserInput组件，一次获取用户名，一次获取密码

export default class UserInput extends Component {
  constructor(props){
    super(props)
   this.state = {
     username: '',
     Password:'',
    };
   }
 render() {
  return (
    <View style={styles.inputWrapper}>
    <Image source={this.props.source} style={styles.inlineImg} />
    <TextInput
      style={styles.input}
      placeholder={this.props.placeholder}
      secureTextEntry={this.props.secureTextEntry}
      autoCorrect={this.props.autoCorrect}
      autoCapitalize={this.props.autoCapitalize}
      returnKeyType={this.props.returnKeyType}
      placeholderTextColor="white"
      underlineColorAndroid="transparent"
      onChangeText={(username) => this.setState({ username})}
      value={this.state.username}
    />
    </View>
   );
  }
 }

导出默认类UserInput扩展组件{
建造师（道具）{
超级（道具）
此.state={
用户名：“”，
密码：“”，
};
}
render（）{
返回(
this.setState（{username}）}
值={this.state.username}
/>
);
}
}

这是我拥有的loginScreen组件

export default class LoginScreen extends Component {
 render() {
  return (
    <Form />
    <ButtonSubmit  />
  );
 }
}

导出默认类LoginScreen扩展组件{
render（）{
返回(
);
}
}

这是我的主屏幕组件及其父组件

  export default class Main extends Component {
  render() {
   return (
    <Router>
      <Scene key="root">
        <Scene key="loginScreen"
          component={LoginScreen}
            animation='fade'
          hideNavBar={true}
          initial={true}
        />
       </Scene>
      </Router>
     );
    }
  }

导出默认类主扩展组件{
render（）{
返回(
);
}
}

---

单击按钮Submit中的按钮后，我需要从表单组件获取两个字段的值，即使用其子组件Userinput组件？对此，我能使用的最佳解决方案是什么？

在React中，除非明确允许，否则子组件无法将值发送回父组件。 您只需将回调传递给子组件并处理输入

或

如果您使用redux进行状态管理，那么您可以使用它

下面是一个示例，将回调传递给子对象

class Parent extends Component {
  constructor() {
    this.state = {
      value: ''
    };
  }

  //...

  handleChangeValue = e => this.setState({value: e.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}
      />
    );
  }
}

类父级扩展组件{
构造函数（）{
此.state={
值：“”
};
}
//...
handleChangeValue=e=>this.setState（{value:e.target.value}）；
//...
render（）{
返回(
);
}
}
类子扩展组件{
//...
render（）{
返回(
);
}
}

在React中，除非明确允许，否则子组件无法将值发送回父组件。 您只需将回调传递给子组件并处理输入

或

如果您使用redux进行状态管理，那么您可以使用它

下面是一个示例，将回调传递给子对象

class Parent extends Component {
  constructor() {
    this.state = {
      value: ''
    };
  }

  //...

  handleChangeValue = e => this.setState({value: e.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}
      />
    );
  }
}

类父级扩展组件{
构造函数（）{
此.state={
值：“”
};
}
//...
handleChangeValue=e=>this.setState（{value:e.target.value}）；
//...
render（）{
返回(
);
}
}
类子扩展组件{
//...
render（）{
返回(
);
}
}

让我们以父组件和一个子组件为例（假设它是一个n输入字段）

处理状态有两个选项：
（1） 父组件中的所有状态。父组件将回调作为道具传递给子组件。更改子组件中的输入后，将调用回调。由于它位于父组件中，因此父组件可以更新状态。

---

（2） 使用redux存储并从多个组件访问它。

让我们以父组件和一个子组件（假设它是一个n输入字段）为例

处理状态有两个选项：
（1） 父组件中的所有状态。父组件将回调作为道具传递给子组件。更改子组件中的输入后，将调用回调。由于它位于父组件中，因此父组件可以更新状态。

---

（2） 使用redux store并从多个组件访问它。

您可以使用redux实现这一点，redux是javascript应用程序的一个可预测状态容器，在redux中，我们可以为应用程序创建全局状态并创建更改状态的操作，这可能需要一段时间才能让您了解redux，但了解redux肯定会带来巨大的好处

按照此链接开始

---

您可以使用redux实现这一点，redux是javascript应用程序的一个可预测状态容器，在redux中，我们可以为应用程序创建全局状态并创建更改状态的操作，这可能需要一段时间才能让您了解redux，但了解redux肯定会带来巨大的好处

按照此链接开始