从 TextInput 获取值并传递给祖父母和孩子反应原生 [英] get value from TextInput and pass to grandparent and to the child react native

问题描述

我是 react-native 的新手，我的组件结构是这样的

I'm new to react-native my component structure goes like this

MainScreen > LoginScreen  > Form         > UserInput
                          > ButtonSubmit  

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

each one is a component This is the form component

 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 组件两次，一次获取用户名，一次获取密码

This is UserInput component im calling UserInput component twice in the form one to get username and one for the password

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 组件

This is the loginScreen component that I have

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

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

This is my MainScreen component and its the parent

  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 组件?我可以使用的最佳解决方案是什么?

onclick the button from the ButtonSubmit I need get the value of the 2 fields from Form component and that is using its child component Userinput component? what will the best solution i can use for this?

推荐答案

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

Lets take the simple case of a parent component and one child component (lets say it is a n input field).

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

You have two options for handling the state:
(1) All state in the parent component. The parent component passes as a prop, to the child component, a callback. Once the input in the child component is changed, the callback is called. Since it is in the parent component, the parent component can update the state.
(2) Using redux store and accessing it from multiple components.

这篇关于从 TextInput 获取值并传递给祖父母和孩子反应原生的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！