从 TextInput 获取值并传递给祖父母和孩子反应原生答案

【问题标题】：get value from TextInput and pass to grandparent and to the child react native从 TextInput 获取值并传递给祖父母和孩子反应原生
【发布时间】：2018-09-16 03:38:43
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript node.js reactjs react-native react-redux

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：