从TextInput获取值并将其传递给祖父母，并传递给子代反应本机

Question

我是新手，我的组件结构如下所示

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

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

这是我拥有的loginScreen组件

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

这是我的MainScreen组件及其父对象

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

我需要从Form组件获取2个字段的值，并且正在使用其子组件Userinput组件吗？ 我将为此使用的最佳解决方案是什么？

Answer 1

让我们以父组件和一个子组件的简单情况为例（假设它是一个输入字段）。

您有两种处理状态的方法：
（1）父组件中的所有状态。 父组件作为道具传递给子组件一个回调。 子组件中的输入更改后，将调用回调。 由于它在父组件中，因此父组件可以更新状态。
（2）使用redux存储并从多个组件访问它。

Answer 2

您可以使用redux来实现此目的，redux是javascript应用程序的可预测状态容器，在redux中，我们可以为应用程序创建全局状态并创建更改状态的操作，可能需要花一些时间才能确定，但​​是知道redux的巨大好处。

点击此链接开始
https://redux.js.org/basics/usage-with-react

Answer 3

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

要么

您可以做的是，如果将redux用于状态管理，则可以使用redux-form 。

这是示例，将回调传递给子级

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