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

点击ButtonSubmit中的按钮我需要从Form组件中获取2个字段的值，并使用其子组件Userinput组件？我能用这个最好的解决方案是什么？

Answer 1

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

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

Answer 2

你可以使用redux来实现这一点，它是一个可预测的javascript应用程序状态容器，在redux中我们可以为应用程序创建全局状态并创建动作来改变状态，可能需要一段时间来包围它，但它知道redux肯定是一个巨大的好处。

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

Answer 3

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

OR

如果您使用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}
      />
    );
  }
}

从TextInput获取值并传递给祖父母，并向子进行本地反应

3 个答案: