如何在按下提交按钮时获得textinnput的值

Question

在学习了reactJs之后，我刚刚开始学习本地react。我想知道当按下按钮时如何将TextInput的值设置为状态值"0"；消息"；，不要像我现在这样硬编码。。。

export default class Writing extends Component {
constructor() {
super();
this.state={
message: "",
};
} 

onSend = () => {
this.setState({ message: "Hello world!" });
alert(this.state.message)
}

render(){
return (
<View>
<TextInput
style={styles.input}
placeholder="Your message"
onChangeText={this.state.message}
/>
<Button
title="Submit"
onPress={this.onSend}
/>
</View>
)
}
}```

Answer 1

它在react native中与在react中相同。所以你应该做同样的事情，即：

<TextInput
style={styles.input}
placeholder="Your message"
onChangeText={(text)=>this.setState({message:text})}
/>

Answer 2

TextInput需要value道具。您可以参考React Native编写的文档。https://reactnative.dev/docs/textinput

你可以这样修改你的代码。

constructor() {
super();
this.state={
message: "",         //This stores what you want to replace when button is pressed
textInputValue: "",  //This stores textinput value
};
} 
onSend = () => {
//Set text input value by state 'message'
this.setState({ textInputValue : this.state.message});
}
<TextInput
value={this.state.textInputValue}   //This controls textinput value
style={styles.input}
placeholder="Your message"
onChangeText={(text)=>{this.setState({textInputValue: text}}
/>

Answer 3

用以下代码替换onSend。onChangeText从不保持状态，它用于更改状态。因此，请用以下代码替换您的TextInput组件。

文本输入

<TextInput
value = {this.state.message}
style={styles.input}
placeholder="Your message"
onChangeText={(result) => {
this.setState({ message: result })
}}
/>

发送

onSend = () => {
alert(this.state.message)
}