将在TextInput中输入的文本打印到控制台

Question

我想将在TextInput中输入的值打印到控制台。

以下是我的代码片段：

constructor(props) {
super(props);
this.state= {
textValue: "",
}
}
_textChange = (text) => {
this.setState({
textValue: text,
})
console.log(this.state.textValue);
}

和：

<TextInput onChange={this._textChange.bind(this)}/>

我知道我的代码有问题，但我无法解决。我只想在控制台中打印TextInput中输入的文本

备注

我看到了这个答案。我无法理解给定链接中的答案。我是一个反应迟钝的新手。所以请试着用简单的方式来解释。

Answer 1

您应该使用onChangeText而不是onChange

<TextInput onChangeText={this._textChange}/>

如果像下面的一样将方法声明为命名函数

_textChange(text) {
this.setState({
textValue: text,
})
}

因此，您应该使用bind，因为this关键字不会引用组件范围，但在您的情况下，这是不必要的。

请看一下这篇文章，了解命名函数和箭头函数之间的区别。

Answer 2

任何组件中的setState()函数都是异步或在函数完成后调用。如果您想查看控制台的结果，可以这样做：

this.setState({
textValue: text,
},() => {
console.log(this.state.textValue);
});

Answer 3

当您创建一个类时，您缺少了一些东西，但您的错误在反应事件onChangeText而不是onChange中，但我认为您可以避免调用this._textChange.bind(this)，这与另一种类型的类声明一起使用(见下文(。我喜欢下面的react类声明，也许它可以帮助理解引擎盖下发生了什么(如果你现在开始使用react(

class PComponern extends Component {
constructor(props) {
super(props);
this.state= {
textValue: "",
};
this._textChange = this._textChange.bind(this)
}

_textChange(text) {
this.setState({
textValue: text,
});
console.log(this.state.textValue);
}   
render (
...
<TextInput onTextChange={this._textChange}/>
...
)

}

这个表单可以帮助你启动，但有时不需要调用构造函数中的this._textChange = this._textChange.bind(this)，也可以参见这个参考

还有一些评论建议

• 您可能想要这样做：onTextChange＝｛this._textChange｝而不是使用onChange

可运行代码