Почему при вводе текста мой evt.target.value всегда не определен?

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)}

Входные данныеact-native-elements являются просто оболочкой для React Native TextInput и наследуют все его свойства, как вы можете видеть в документации.

Answer 1

Вы можете сделать следующее, чтобы сделать эту работу.

1 - Попробуйте setState, используя функцию стрелки внутри onChange.

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

Кажется, вы используете React Native Elements UI kit.Компонент ввода, предоставляемый наборами пользовательского интерфейса, использует те же реквизиты, которые заданы по умолчанию TextInput, заданным RN.

Вы можете получить текст двумя способами, предполагая, что вы используете этот обратный вызов.

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
   }
}

Надеюсь, это поможет.Упоминание для любых уточнений в комментариях.

Answer 3

Если все, что вам нужно, - это само текстовое значение, используйте вместо этого событие onChangeText:

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

Input реагирующих элементов является просто оболочкой для React Native TextInput и наследует всеего реквизита, как вы можете видеть в документах .