将状态设置为“输入名称”字段的值时遇到问题

Question

我有一个简单的 TextInput 用于输入您的姓名。我想把它传递给另一个场景。不过，首先，我想将值保存到当前组件的状态。当我打开调试器时，我每拥有一个console.log(this.name)，就会得到undefined。

这是我的代码：

  constructor(props) {
    super(props);
    this.state = {
      name: ''
    };
  }

<TextInput style={styles.inputName}
  placeholder="Enter your name"
  textAlign="center" 
  onChange={this.handleChange.bind(this)} />

handleChange(event) {
  this.setState({
  name: event.nativeEvent.text
  });
  console.log(this.name)
}

您知道为什么我总是将“未定义”作为名称的值吗？将状态设置为与正在键入的内容等效的正确方法是什么？

只有在按下提交按钮后才设置状态的更好方法吗？如果有，那是怎么做的？

Answer 1

您正在尝试访问this.name，在您的案例中，它正在检查组件对象上的（可能不存在的）名称属性。您应该查看this.state.name。但是，即使您确实尝试通过this.state.name 注销事件处理程序中的更新状态，您可能仍然会遇到问题。来自React docs：

setState() 不会立即改变 this.state 而是创建一个 等待状态转换。调用 this 后访问 this.state 方法可能会返回现有值。

最后，我建议通过event.target.value 从您的事件中提取名称值，而不是通过nativeEvent 属性。