首页 > 解决方案 > TextInput 中的值没有改变?

问题描述

我是一个新手,对本机反应并在以下问题上苦苦挣扎。我正在做一个更新功能,一旦选择了一个用户,那么这个用户的数据就会被填充到他们的专用字段中,TextInput比如given_namefamily_name等等。问题是当我尝试从任何TextInput它不允许我修改填充的数据时,因为文本根本不会改变并且无论如何都保持不变。我知道这种情况正在发生,因为value我的字段被分配给我想要更新的传入数据,但我该如何解决这个问题并能够修改这个值?

如果您能提供帮助,我将不胜感激。

constructor(props) {
  super(props);
  this.state = {
    given_name: '',
    family_name: '',
    email: '',
    password: '',
    UserInfo: '',
  };
}

handleGivenName = (text) => {
  this.setState({
    given_name: text
  })
}
handleLastName = (text) => {
  this.setState({
    family_name: text
  })
}
handleEmail = (text) => {
  this.setState({
    email: text
  })
}
handlePass = (text) => {
  this.setState({
    password: text
  })
}

<TextInput placeholder="Last Name"
           onChangeText={ this.handleLastName }
           value={ this.state.UserInfo.family_name } />

标签: javascriptreactjsreact-native

解决方案


尝试在中使用箭头函数onChangeText

handleLastName(text) {
  this.setState({
    family_name: text,
    userInfo: { ...this.state.userInfo, family_name: text}
  })
}

使成为():

<TextInput   
placeholder="Last Name" 
onChangeText={(text) => this.handleLastName(text)} 
value={this.state.family_name} // remove UserInfo
/>

推荐阅读