如何在TextInput内容删除时清空React Native中的this.state.input状态

嘿，我一眼就瞅到你代码里的两处关键问题啦，这就是为啥删除内容后控制台还留着最后一个字符的原因：

问题根源 #

1. State字段名不统一：你在constructor里定义的state是input，但在_textChange里更新的却是textValue，打印的也是this.state.textValue——等于你原来的input字段根本没被碰过，新增的textValue和输入框也没绑定，完全脱节了！
2. setState是异步的：你直接在setState之后打印state，拿到的其实是更新前的旧值，这就导致打印结果总是慢一步。
3. TextInput没绑定value：你没把输入框的内容和state绑定，输入框自己维护状态，和你的state不同步，删除时自然没法同步清空state。

修正后的完整代码 #

组件逻辑部分 #

constructor(props) { 
  super(props); 
  this.state= { 
    input: "", // 统一用这个字段管理输入内容
  } 
} 

_textChange = (text) => { 
  // 用setState的回调函数获取最新state（因为setState是异步操作）
  this.setState({ 
    input: text, // 更新统一的state字段
  }, () => {
    console.log(this.state.input); // 这里打印的就是实时的输入内容啦
  })
} 

TextInput部分 #

<TextInput 
  onChangeText={this._textChange}
  value={this.state.input} // 把输入框内容和state绑定，变成受控组件
/>

为啥这样改就好使？ #

• 统一字段名后，state和输入框的更新完全对应，删除内容时text参数会变成空字符串，state里的input也会跟着变成空。
• 绑定value属性后，TextInput变成受控组件，它的内容完全由state控制，输入和删除都会实时同步到state。
• 用setState的回调函数打印state，能确保拿到的是更新后的最新值，不会出现滞后的情况。

现在你再测试一下，删除所有内容时控制台会打印空字符串，完全和输入框内容同步啦！

内容的提问来源于stack exchange，提问作者pratteek shaurya