Axios Post с React-native

Я долго искал ответ, но не нашел. У меня есть почтовый метод с Axios. Значения из ввода не переходят в состояние.

class LoginForm extends Component {
  constructor(props){
    super(props);
    this.state = {firstName:'', lastName: '', number: ''};
  }
  render(){
    return (
        <View>
        <Item floatingLabel>
        <Label>Ваше имя</Label>
        <TextInput Value = {this.state.firstName} onChangeText = {(firstName) => this.setState({firstName})}/>
        </Item>
        <Item floatingLabel>
        <Label>Ваша фамилия</Label>
        <TextInput value = {this.state.lastName} onChangeText = {(lastName) => this.setState({lastName})}/>
        <Text>{this.state.firstName}</Text>
        </Item>
        <Item floatingLabel>
        <Label>Номер телефона</Label>
        <TextInput value = {this.props.number} onChange = {(number) => this.setState({number})}/>
        </Item>
        <Button block style = {{marginTop:50}} 
        onPress = {() => {
          let data  = {
            firstname: this.state.firstName,
            lastname: this.state.lastName,
            number: this.state.number
          }
          axios.post('http://10.0.2.2:3000/user_add',data)
                  }}>
        <Text>Отправить</Text>
      </Button>
      </View>
    );
  }

    }

export default LoginForm;

и

app.post('/user_add',function(req,res){
var firstname = req.body.firstname;
var lastname = req.body.lastname;
var number = req.body.number;
var values = [firstname,lastname,number];
console.info(values);
  
 connection.query('INSERT INTO users (firstname, lastname, number) VALUES (?)',[values],function(err){
     if (!err) {
         console.info("User added!")
         res.send(firstname,lastname,number);
     } else {
         console.info(err);
     }
 })
});

Работает, но некорректно. Пользователь добавляет, но без моих значений он добавляет только '', '', '' Пытался дать несколько советов: добавил события, попытался поместить значения в массивы, но не работает. Результат: добавить значения в базу данных

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
0
792
2

Ответы 2

Вы должны использовать TextInput следующим образом: onChangeText = {(firstName)=>this.setState({firstName})} и повторите то же самое для lastName и number

Callback that is called when the text input's text changes. Changed text is passed as an argument to the callback handler.

https://facebook.github.io/react-native/docs/textinput#onchangetext

Можете ли вы использовать console.info(this.state) внутри submitForm или использовать react-dev-tools для проверки состояния компонента перед нажатием кнопки отправки?

Kabbany 18.12.2018 11:14

это приложение на Android, и это усложняет задачу

Anna Shevtsova 18.12.2018 11:33

Он по-прежнему ссылается на e.target.value, которого больше не должно быть.

Kabbany 18.12.2018 13:29

Я изменил e.target

Anna Shevtsova 18.12.2018 16:22

Я заметил две опечатки: 1 - первая опора TextInput: опора - это значение, а не значение 2 - последняя опора TexInput: onChange должно быть onChangeText. Все еще не уверен, что это решит проблему

Kabbany 18.12.2018 16:58

Я использую:

import {TextInput} from 'react-native';

<TextInput
   editable = {true}
   placeholder = "Write here"
   onChangeText = {text => this.setState({ inputText: text })}
   value = {this.state.inputText}
/>

Это отлично работает для меня. Обратите внимание, что вы написали «Value» с большой буквой V в первом TextInput с firstName. поменяй на строчную, может это поможет.

ввод связан с DOM, в то время как этот вопрос связан с реагирующим родным

Kabbany 18.12.2018 16:56

Извините, не заметил. починил это.

Sophie Cooperman 19.12.2018 10:32

Другие вопросы по теме