React Native Получение this.state.input как неопределенного Работа, оштрафованная в React Native Web

Question

React Native Получение this.state.input в качестве неопределенного. Работы, оштрафованные в React Native Web

Я давно работал в качестве разработчика, хотел создать простое в использовании приложение с реагированием на натив с некоторыми сетевыми компонентами. Я застрял, пытаясь выяснить, почему this.state.input хранится как неопределенное примитивное значение, новое, чтобы реагировать на нативное. Я думаю, моё знание может быть моим затуманиванием моей перспективы.

Также нормально работает пост-запрос https с axios. но хранится как неопределенный

Кстати, я искал stackoverflow для решения, пробовал каждое неясное решение, которое смог найти, так что вряд ли это будет повторяющийся вопрос

Не знаю, жизненный ли это циклпроблема, или проблема связывания, или проблема реактивного API, кажется, не могут понять это

import React, {Component} from 'react';
import axios from 'axios';
import {View, Text, TextInput, Button, StyleSheet} from 'react-native';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      input: '',
      messages: '',
    };
    this.handleChange = this.handleChange.bind(this);
    this.sendMessage = this.sendMessage.bind(this);
  }

  handleChange(event) {
    this.setState({
      input: event.target.value,
    });
  }
  sendMessage() {
    const sendIt = `${this.state.input}`;// this.state.input RETRIEVED AND STORED AS UNDEFINED
    const todol = {
      todo: `${sendIt}`,
    };

    console.log(sendIt); // GETTING UNDEFINED HERE WORKS FINE WITH REACT NATIVE WEB

    axios
      .post('http://10.120.1.190:7000/todos/add', todol)
      .then(res => {
        this.setState({messages: JSON.stringify(res.data)});
        console.log(this.state.messages);
      })
      .catch(err => console.log(`${err}`));
    this.setState({
      input: '',
    });
  }

  render() {
    return (
      <View>
        <Text style={styles.old}>Type in a new Message:</Text>
        <TextInput
          style={styles.old}
          value={this.state.input}
          onChange={this.handleChange}
        />
        <Button title="Submit" onPress={this.sendMessage}></Button>
        <Text>{this.state.messages}</Text>
      </View>
    );
  }
}
// Change code above this line

const styles = StyleSheet.create({
  old: {
    fontFamily: 'Helvetica',
    fontSize: 15,
    lineHeight: 30,
    margin: 'auto',
  },

  new: {
    fontFamily: 'Lato',
    fontSize: 25,
    lineHeight: 30,
    margin: 'auto',
  },
});

export default App;

Answer 1

Обычно мы используем onChangeText для обработки изменений ввода текста в реагирующем языке.

Ваш TextInput должен быть таким:

      <TextInput
        style={styles.old}
        value={this.state.input}
        onChangeText={text =>
          this.setState({
            input: text
          })
        }
      />

Answer 2

Согласно документации

onChange

Обратный вызов, который вызывается при изменении текста при вводе текста.

Это будет вызвано с { nativeEvent: { eventCount, target, text} }

Вы должны использовать: event.text, но вы также можете использовать onChangeText, поскольку он предоставит текст напрямую.