React Native：点击提交按钮时将TextInput值设为state的message

直接修正两处核心问题，就能实现TextInput值与state的绑定，以及点击按钮时正确使用输入内容：

1. 修复TextInput的双向绑定逻辑 #

原代码里onChangeText直接传this.state.message是错误的，它需要一个接收输入文本的函数来更新state；同时必须给TextInput添加value属性绑定到state的message，确保输入框内容和state同步。

2. 调整onSend函数的逻辑 #

原代码硬编码设置message的值，现在改为直接使用输入过程中已同步到state里的内容，同时注意setState的异步特性——如果需要在state更新后立即操作最新值，要用到回调函数。

修正后的完整代码 #

export default class Writing extends Component {
    constructor() {
      super();
      this.state={
        message: "",
      };
    } 
    
    onSend = () => {
      // 直接使用state中已同步的用户输入值，无需硬编码
      alert(this.state.message);
      // 后续如需提交数据等操作，直接用this.state.message即可
    }
      
    render(){
      return (
        <View>
          <TextInput
            style={styles.input}
            placeholder="Your message"
            value={this.state.message} // 绑定state值到输入框，实现同步显示
            onChangeText={(text) => this.setState({ message: text })} // 输入时实时更新state
          />
          <Button
            title="Submit"
            onPress={this.onSend}
          />
        </View>
      )
    }
}

关键说明 #

• value={this.state.message}：让输入框始终显示state中存储的内容，保证输入内容和state的一致性。
• onChangeText={(text) => this.setState({ message: text })}：每次输入文本变化时，把最新输入内容同步更新到state的message字段。
• 如果是需要修改state后立即操作最新值（比如特殊场景下的状态更新后回调），可以用setState的回调写法：

  this.setState({ message: 新内容 }, () => {
    alert(this.state.message);
  });
  

  但当前场景下，输入时已经实时同步了state，点击按钮时直接取this.state.message就是最新的用户输入值。

内容的提问来源于stack exchange，提问作者Pieter Lazet