Некоторые изменения в функции и функции setState?

Question

Я делаю такие вещи вactjs, но когда я начал изучать реактивный язык, он не работает, можете ли вы сказать мне, как выполнять такие задачи?

import React, {Component} from 'react';
import {Text, View, Form } from 'react-native';
import { FormLabel, FormInput, FormValidationMessage, Button } from 'react-native-elements';

class Header extends Component {
  constructor(props){
    super(props);
    this.state = {
      email : '',
      password : '',
    };
  }
  inputData = event => {
    this.setState({
      [event.target.name]:event.target.value
    });
  }
  submitData = event => {
    event.preventDefault();
    console.log(this.state);
  }
  render(){
    return(
      <View>
        <Text style= {{fontSize : 40, marginTop : 50, marginLeft : 100, fontWeight : 'bold'}}>
          New App!
        </Text>
          <FormLabel>Email</FormLabel>
          <FormInput name='email' type='email' onChange={this.inputData}/>
          <FormLabel>Password</FormLabel>
          <FormInput name='password' type='password' onChange={this.inputData}/>
          <Button title='Submit' onPress={this.submitData} style={{marginTop:20}}/>
      </View>
    );
  }
}
export default Header;

Как вы можете видеть, вот чтокогда я использовал onChange, значения не присваиваются.

Я знаю, как использовать с onChangeText, и он также работает, но вы можете сказать мне, почему вышеупомянутый подход не работает, а если нет, то каких-либо существенных причин ??

Answer 1

Вы можете попробовать этот способ, используйте onChangeText вместо onChange

import React, {Component} from 'react';
import {Text, View, Form } from 'react-native';
import { FormLabel, FormInput, FormValidationMessage, Button } from 'react-native-elements';

class Header extends Component {
  constructor(props){
    super(props);
    this.state = {
      email : '',
      password : '',
    };
  }
  inputData = event => {
    this.setState({
      [event.target.name]:event.target.value
    });
  }

  inputEmail = text => {
    this.setState({
      email: text
    })
  }
  inputPassword = text => {
    this.setState({
      password: text
    })
  }
  submitData = event => {
    event.preventDefault();
    console.log(this.state);
  }
  render(){
    return(
      <View>
        <Text style= {{fontSize : 40, marginTop : 50, marginLeft : 100, fontWeight : 'bold'}}>
          New App!
        </Text>
          <FormLabel>Email</FormLabel>
          <FormInput value={this.state.email} name='email' type='email' onChangeText={this.inputEmail}/>
          <FormLabel>Password</FormLabel>
          <FormInput value={this.state.password} name='password' type='password' onChangeText={this.inputPassword}/>
          <Button title='Submit' onPress={this.submitData} style={{marginTop:20}}/>
      </View>
    );
  }
}
export default Header;