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

Having trouble with setting state to value of "Enter name" field

本文关键字:字段 问题 遇到 输入名称 设置 状态 输入      更新时间:2023-09-26

我有一个简单的文本输入来输入你的名字。我想把它传递给另一个场景。不过,首先,我想将值保存到当前组件的状态中。当我打开调试器时,我每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)
}

你知道为什么我总是被"未定义"作为名称的值吗?设置与正在键入的状态等效的状态的正确方法是什么?

仅在按下提交按钮后设置状态是否更好?如果是这样,如何做到这一点?

您正在尝试访问this.name,这是在您的情况下检查组件对象上的(可能不存在的)name属性。你应该看看this.state.name.但是,即使您确实尝试通过 this.state.name 注销事件处理程序中的更新状态,您仍然可能遇到问题。来自 React 文档:

setState() 不会立即改变 this.state,但会创建一个 挂起的状态转换。调用此状态后访问此状态 方法可能会返回现有值。

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