React Native 如何将文本输入值从子组件传递到父组件

Question

我想做一个简单的文本输入操作。用户可以输入它的名字。

我创建了基于类的父类 (App.js) 和基于函数的 (InputName.js)

我将父类中的子组件称为

<InputName />

我将 InputName.js 创建为

 const InputName = () => {

const [text, setText] = React.useState(null);
return ( <TextInput 
autoCapitalize='none' 
onChangeText={(text) => setText(text)} 
style={styles.userTextInput} />)

}

我的问题是如何从父组件中获取子组件中的 onChangeText 值。

   //imports
   import EmailInput from '../components/EmailInput';
   

   class Login extends Component { 

        state = {
        inputValue: '',
    }
        constructor(props) {
        super(props);
    }

    onChangeText = (text) => {
    this.setState({inputValue: text.target.value});
    };

    render() {
 return (
  <EmailInput value={this.state.inputValue} onChangeText={(text) => this.onChangeText(text)} />  )}};

// 输入文件

    const EmailInput = (onChangeText, value) => {
    const [text, setText] = React.useState(null);
    return ( <TextInput 
    autoCapitalize='none'
    value={value} 
    onChangeText={onChangeText} 
    style={//styles} />)
  }
                               

Answer 1

只需从父类中的子组件传递您的方法。这是一个工作示例：

import React from 'react';
import {TextInput} from 'react-native';

class EmailInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    const {onTextChange, inputValue} = this.props;
    return (
      <TextInput
        autoCapitalize="none"
        value={inputValue}
        onChangeText={onTextChange}
      />
    );
  }
}

export default EmailInput;

在您的主课中，只需执行以下操作：

import React from 'react';
import {
  SafeAreaView,
} from 'react-native';
import EmailInput from '../components/EmailInput';

class LandingScreen extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      locals: {},
      inputValue: '',
    };
  }

  onTextChange = text => {
    this.setState({inputValue: text.target.value});
  };
  render() {
    return (
      <SafeAreaView style={styles.container}>
             <EmailInput
          inputValue={this.state.inputValue}
          onChangeText={text => this.onTextChange(text)}
        />
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({

});

const mapStateToProps = state => {
  const apiLoading = state.common.apiLoading;
  return {
    apiLoading,
  };
};

export default connect(mapStateToProps, actions)(LandingScreen);