未调用 ReactNative TextInput' onChangeText答案

【问题标题】：ReactNative TextInput' onChangeText is not called未调用 ReactNative TextInput' onChangeText
【发布时间】：2018-05-28 05:35:00
【问题描述】：

我希望在通过状态更改为其设置文本时触发onTextChange。我正在构建我的屏幕数字键盘以输入 PIN 码，并且我想在用户按下这些键时捕捉 TextInput 上的文本更改。

this.setState({text})

我的TextInput 看起来像这样：

<TextInput
  editable={false}
  onChangeText={text => Alert.alert(text)}
  secureTextEntry={true}
  value={this.state.text}

UPD：我发现了某种相关的问题，但它也没有答案：TextInput not working as expected when programmatically entering text

【问题讨论】：

标签： react-native react-native-textinput

【解决方案1】：

您将editable 属性设置为false，然后TextInput 的文本将永远不会改变，onChangeText 将永远不会调用...

【讨论】：

文本改变了，我检查了。虽然当我将 editable 设置为 true 并通过系统键盘更改文本时 onChangeText 调用按预期工作。
所以也检查一下：onChangeText={(text) => {alert(text)}}

【解决方案2】：

我最终使用了onContentSizeChange，它在文本更改时被调用。我确实发现某些 TextInput 方法在以编程方式设置文本时无法正常工作。

【讨论】：

很棒的伙伴。非常感谢！
你是如何使用 onContentSizeChange 的？据我所知，您无法获取 onContentSizeChange 中文本的值。
@Lucky_girl 据我所知，我只用它来跟踪 TextInput 中的变化；不获取 TextInput 的值

【解决方案3】：

我认为 onChangeText 的事件处理函数是异步的，因此你应该使用 async/await

<Input onChangeText={(val) => { this.changeHandler(val) }} />

并且更改处理程序方法应该是

changeHandler = async (val) =>{
  await this.setState({
    [someKey]: val
 })
  .
  .
  .
  do other stuff that depends on val
}

它以前可以发出http请求，当输入值更改时触发，并使用输入值。

【讨论】：

【解决方案4】：

你可以像下面这样使用它。

class MyComponent extends Component{
  constructor(props){
    super(props)
    this.state = { text: null }   //By default it will be null.
    this._handleChange = this._handleChange.bind(this)  //You need to bind your function here.
  }

  _handleChange(e) {
        const { name, value } = e.target;  //it will destructure your name and value where ever you are using _handleChange method.
        this.setState({
            [name]: value // here we are setting the state dynamically.
        });
        alert(value)
    }

   render() {
     return(
       <View>
         <TextInput
           editable={true}
           onChangeText={this._handleChange}  // this will call _handleChange method.
           secureTextEntry={true}
           value={this.state.text}/>       
       </View>
     )
   }
}

【讨论】：

【解决方案5】：

此代码可能对您有所帮助：

     this.state = {Alert.alert(
                         'Update available //your Title',
                         'Keep your app up to date to enjoy the latest 
                          features //your Message',
                          [
                            {
                             text: 'Cancel',
                             onPress: () => console.log('Cancel Pressed'),
                             style: 'cancel',
                             }
                           ]
                      )
    }
    <TextInput
      editable={false}
      onChangeText={text => Alert.alert(text)}
      secureTextEntry={true}
      value={this.state.text}
    />

【讨论】：

【解决方案6】：

因为你没有绑定它：

onChangeText={text => Alert.alert(text)}

应该改变：

onChangeText={this.changeFunction.bind(this)}

然后添加一个函数：

changeFunction(text){
   alert(text);
}

=> 如果它不起作用，你可以测试然后投票给我 :)

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。