React Native获取存储为React NativeWeb中定义的未定义工作的this.state.input

Question

React Native获取this.state.input存储为未定义的作品在React NativeWeb 中定义

我做了一段时间的react开发人员，想用react native和一些网络组件构建一个简单易行的应用程序，但在试图弄清楚为什么这个.state.input被存储为一个未定义的原始值时遇到了困难

此外，使用axios的https发布请求运行良好，但仍被存储为未定义的

顺便说一句，我在stackoverflow中搜索了一个解决方案，尝试了我能找到的所有模糊的解决方案，所以这不太可能是一个重复的问题

不知道是生命周期问题、绑定问题还是react原生api问题似乎无法解决

import React, {Component} from 'react';
import axios from 'axios';
import {View, Text, TextInput, Button, StyleSheet} from 'react-native';
class App extends Component {
constructor(props) {
super(props);
this.state = {
input: '',
messages: '',
};
this.handleChange = this.handleChange.bind(this);
this.sendMessage = this.sendMessage.bind(this);
}
handleChange(event) {
this.setState({
input: event.target.value,
});
}
sendMessage() {
const sendIt = `${this.state.input}`;// this.state.input RETRIEVED AND STORED AS UNDEFINED
const todol = {
todo: `${sendIt}`,
};
console.log(sendIt); // GETTING UNDEFINED HERE WORKS FINE WITH REACT NATIVE WEB
axios
.post('http://10.120.1.190:7000/todos/add', todol)
.then(res => {
this.setState({messages: JSON.stringify(res.data)});
console.log(this.state.messages);
})
.catch(err => console.log(`${err}`));
this.setState({
input: '',
});
}
render() {
return (
<View>
<Text style={styles.old}>Type in a new Message:</Text>
<TextInput
style={styles.old}
value={this.state.input}
onChange={this.handleChange}
/>
<Button title="Submit" onPress={this.sendMessage}></Button>
<Text>{this.state.messages}</Text>
</View>
);
}
}
// Change code above this line
const styles = StyleSheet.create({
old: {
fontFamily: 'Helvetica',
fontSize: 15,
lineHeight: 30,
margin: 'auto',
},
new: {
fontFamily: 'Lato',
fontSize: 25,
lineHeight: 30,
margin: 'auto',
},
});
export default App;

Answer 1

我们通常使用onChangeText来处理react native中的文本输入更改。

您的TextInput必须是这样的：

<TextInput
style={styles.old}
value={this.state.input}
onChangeText={text =>
this.setState({
input: text
})
}
/> 

Answer 2

根据文档

on更改

当文本输入的文本更改时调用的回调。

这将用{ nativeEvent: { eventCount, target, text} }调用

您应该使用：event.text，但也可以使用onChangeText，因为它将直接提供文本。