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

onChangeText正在侦听输入的更改。那是您关于（文字）的文字。然后，我们使用es6箭头符号来调用匿名函数=>。从这里开始，我们称为this.setState（{}），它是一个内置的带有react的状态管理功能。它将状态（可能已声明或未声明）的变量设置为（text）的更改值，以供以后或其他地方使用。

困惑可能是，如果您自己没有这样声明文本，

this.state = { text: ''}

如果您还没有处于状态的文本，但是看到它正在更新，这将使它的实际存储方式感到困惑。但是在react中，即使您没有自动声明一个状态变量，它也会创建一个新的状态变量。

Answer 2

但仍然看不到this.state.text的起始位置

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

func dragItemFor(indexPath: IndexPath) -> [UIDragItem]{
    if let cell = eiCollectionView.cellForItem(at: indexPath) as? EiCollactionViewCell {
        if let attributedString = cell.label.attributedText {
            for attr in attributedString.attributes(at: 0, effectiveRange: nil) {
                print("pre drag vc: ",attr.key, attr.value)// prints the font 
            }
            let dragItem =  UIDragItem(itemProvider: NSItemProvider(object:  attributedString))
            dragItem.localObject = attributedString
            return [dragItem]
        }
    }
    return []
}

我不完全理解为什么this.state.text设置为TextInput的值

每当用户在constructor(props) { super(props); this.state = {text: ''}; // initialized here }中键入文本时，就会调用input函数，该函数实际上会更新状态=> onChangeText变量将采用文本输入的值

此外，当您调用text时，它将重新呈现该组件，因此

setState

将重新执行，您将看到用户键入的每个单词的符号

Answer 3

只有直接写给this.state的地方应该是Components构造函数。在其他地方，您应该使用this.setState函数，该函数接受已合并到Components当前状态的Object。

可以通过直接写入this.state来更改状态，但是不会导致使用新数据重新渲染组件，并且通常会导致状态不一致。

Answer 4

我知道这里使用了匿名函数，但仍然看不到this.state.text的起始位置。

那只是代码示例。您必须指定初始状态，以使onChangeText在构造函数内工作。仅供参考，这不仅是匿名函数，而且是arrow function。

this.state = {
  text: ''
}

您能用普通的javascript展示类似的例子吗？

我认为您打算以其他方式使用？如果是这样，您可以这样使用：

定义方法：

onChangeText(text) {
  this.setState({text})
  // ^^ alias of -> this.setState({text:text})
}

使用onChangeText方法：

onChangeText={this.onChangeText(text)}

在构造函数中绑定this：

this.onChangeText = this.onChangeText.bind(this)

Answer 5

this.state.text是组件state的一部分。

我不完全理解为什么this.state.text设置为TextInput的值

它以状态存储，以便其他组件可以访问该值并使用它。（例如：表单提交需要所有值。）

对于TextInput表单提交示例：

handleSubmit = () => {
  mySubmitService(this.state.textInput)
}

react docs中的另一个示例：

class Clock extends React.Component {
constructor(props) {
  super(props);
  this.state = {date: new Date()}; //This is the default state initialization
}

render() {
  return (
   <div>
      <h1>Hello, world!</h1>
      <h2>It is {this.state.date.toLocaleTimeString()}.</h2> //This is accessing the value 
   </div>
  );
 }
}

普通JS：

var data = +(document.getElementById("TextInputId").value;);

onChangeText = {（text）=> this.setState（{text}）`如何工作？

5 个答案: