React Native 如何将 textinput 值从子组件传递到父组件
React Native How to pass textinput values from child component to parent component
我想做一个简单的文本输入操作。用户可以输入其名称。
我创建了基于 class 的父级 (App.js) 和基于功能的 (InputName.js)
我将父组件中的子组件称为 class 为
<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} />)
}
只需将您的方法从父组件的子组件传递给 class。这是一个工作示例:
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;
在您的主要 class 中,只需执行以下操作:
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);
我想做一个简单的文本输入操作。用户可以输入其名称。
我创建了基于 class 的父级 (App.js) 和基于功能的 (InputName.js)
我将父组件中的子组件称为 class 为
<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} />)
}
只需将您的方法从父组件的子组件传递给 class。这是一个工作示例:
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;
在您的主要 class 中,只需执行以下操作:
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);