Question

我正在尝试获取用户输入，保存到变量中，然后分派到商店。但是无论我尝试什么，我总是会得到“未定义”，为什么？

我觉得我已经尝试了一切。我最初以为我的范围是错误的。然后我以为它只是无法设置setState / 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>
    );
  }
}

在updateInputValue（evt）函数中：

console.log(evt) = SyntheticEvent {dispatchConfig: {phasedRegistrationNames: {captured: "onChangeCapture", bubbled: "onChange"}}, _targetInst: FiberNode, _dispatchListeners: function, _dispatchInstances: FiberNode, nativeEvent: {target: 3, text: "D", eventCount: 1}, …}

最初console.log(evt.target.value) = {inputValue: ''}（如预期）

但是onChange console.log(evt.target.valur) = {inputValue: undefined}

稍后访问此帖子的任何人的答案

以下是一些人建议的最简单的方法（谢谢）：

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

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

react-native-elements输入只是React的包装原生TextInput，并继承其所有道具，如您在文档。

Answer 1

您可以执行以下操作来使这项工作生效。

1-使用onChange中的箭头功能尝试setState。

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

2-尝试使updateInputValue方法成为箭头函数，因为在的JavaScript上下文中，它会根据调用函数的方式而变化。

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

  }

Answer 2

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

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

react-native-elements输入只是React Native TextInput的包装，并且继承了其所有道具，如您在docs中所见。

Answer 3

似乎您正在使用React Native Elements UI kit。 UI工具包提供的输入组件使用RN提供的默认TextInput提供的相同道具。

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

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

方法提到应将哪些道具传递给<Input />

方法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.target.value总是未定义？

稍后访问此帖子的任何人的答案

3 个答案: