Reactjs 获取输入文本时，为什么我的evt.target.value总是未定义？

我试图获取用户输入，保存到变量，然后分派到存储。但无论我尝试什么，我总是得到“未定义”，这是为什么

我觉得我什么都试过了。我最初认为我的范围是错误的。然后我认为它只是无法设置state/getState，但它是设置状态，就像未定义一样

import React from 'react';
import { View } from 'react-native';
import { Button, Input } from 'react-native-elements';


 export default class HomeScreen extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      inputValue: ''
    };
  }

  //update input value
  updateInputValue(evt) {
    console.log(evt)
    console.log(evt.target.value)
    let saveInputValue = evt.target.value
    this.setState({
      inputValue: saveInputValue
    });
    console.log(this.state)

  }

  render() {
    return (      
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Input
          placeholder='User Input'
          containerStyle={{width:'50%'}}
          value={this.state.inputValue}
          onChange={evt => this.updateInputValue(evt)}
        />
        <View style={{flex:0.03}}/>
          <Button title="Go to Second Screen"
            //onPress={() => {this.handleClick()}}
            buttonStyle={{ backgroundColor: '#C7D8C6' }}
          />
      </View>
    );
  }
}

最初

console.log（evt.target.value）={inputValue:'}

（如预期）

但是onChange

console.log（evt.target.valur）={inputValue:undefined}

为以后访问此帖子的任何人解答 下面的几个人建议了这个最简单的方法（谢谢）：

---

如果您只需要文本值本身，请改用onChangeText事件>：

react原生元素输入只是react的包装器 原生TextInput，并继承其所有道具，如您在 医生

---

如果只需要文本值本身，请使用

onChangeText

事件：

onChangeText={text => this.updateInputValue(text)}

---

react native elements输入只是react native TextInput的一个包装器，它继承了它的所有特性，正如您在中所看到的。

您可以执行以下操作来实现这一点

1-使用onChange内的箭头函数尝试设置状态

onChange={event => this.setState({inputValue: event.target.value})}

2-尝试将updateInputValue方法设置为arrow函数，因为在的javascript上下文中，此会根据调用函数的方式进行更改

updateInputValue = (evt) => {
    console.log(evt)
    console.log(evt.target.value)
    let saveInputValue = evt.target.value
    this.setState({
      inputValue: saveInputValue
    });
    console.log(this.state)

  }

---

似乎您正在使用

React Native Elements用户界面工具包

。UI工具包提供的输入组件使用与RN提供的默认文本输入相同的道具

假设使用此回调，则可以通过两种方式获取文本

handleTextChange = (text) => {
  this.setState({
    youName: text,
  })
}

方法提到应该传递给

方法1

onChange={evt => this.handleTextChange(evt.nativeEvent.text)} // As given by RN Docs

方法2

onChangeText={text => this.handleTextChange(text)}

注意：从

onChange

方法的事件对象获取的对象如下所示

{
   nativeEvent: {
     eventCount,
     target,
     text
   }
}

---

希望这有帮助。对于评论的任何澄清，请提及。

尝试使用evt.currentTarget.value。您不应该使用

onChangeText

获取值吗？您可以尝试将updateInputValue函数设置为箭头函数吗？在javascript中引用这一点有点棘手。因此，请尝试将其设置为箭头函数或在构造函数中绑定它

onChangeText={text => this.handleTextChange(text)}

{
   nativeEvent: {
     eventCount,
     target,
     text
   }
}