javascript - 从 TextInput 获取值并传递给祖 parent 和 child react native

Question

我是 react 原生的新手，我的组件结构是这样的

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

这是我拥有的登录屏幕组件

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

onclick ButtonSubmit 中的按钮 我需要从 Form 组件获取 2 个字段的值，并且正在使用其子组件 Userinput 组件？我可以为此使用什么最佳解决方案？

Answer 1

让我们考虑一个父组件和一个子组件的简单情况(假设它是一个 n 输入字段)。

您有两种处理状态的选项:
(1) 父组件中的所有状态。父组件将回调作为 prop 传递给子组件。一旦子组件中的输入发生更改，就会调用回调。由于是在父组件中，所以父组件可以更新状态。
(2) 使用redux store并从多个组件访问它。