javascript - `onChangeText={(text) => this.setState({text})` 是如何工作的？

Question

关于https://facebook.github.io/react-native/docs/handling-text-input他们给出了使用 onChangeText 的示例:

  <View style={{padding: 10}}>
    <TextInput
      style={{height: 40}}
      placeholder="Type here to translate!"
      onChangeText={(text) => this.setState({text})}
    />

我不太明白为什么 this.state.text 设置为 TextInput 的值。它到底是如何运作的？我知道这里使用了匿名函数，但仍然看不到 this.state.text 是在哪里启动的。你能用普通的 javascript 展示一个类似的例子吗？

非常感谢!

Answer 1

but still can't see where this.state.text is initiated

它实际上是在构造函数中初始化的

constructor(props) {
  super(props);
  this.state = {text: ''}; // initialized here
}

I don't exactly understand why this.state.text is set to the value of TextInput

每当用户在 input 中键入文本时，都会调用 onChangeText 函数，该函数实际上会更新状态 => text 变量将采用文本输入的值

此外，当你调用setState时，它会重新渲染组件，所以

<Text style={{padding: 10, fontSize: 42}}>
  {this.state.text.split(' ').map((word) => word && '🍕').join(' ')}
</Text>

将重新执行，您将看到用户输入的每个单词都有一个 🍕 符号