Question

我有一个简单的TextInput用于输入你的名字。我想将此传递给另一个场景。首先，我想将值保存到当前组件的状态。当我打开调试器时，对于我拥有的undefined，我得到console.log(this.name)。

这是我的代码：

  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，它正在检查您案例中组件对象上的（可能不存在的）name属性。你应该看this.state.name。但是，即使您尝试通过this.state.name在事件处理程序中注销更新状态，您仍可能遇到问题。来自React docs：

setState（）不会立即改变this.state但会创建一个待定状态转换。调用后访问this.state 方法可以返回现有值。

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

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

1 个答案: