reactjs - 函数和setState函数有一些变化吗？

Question

我在reactjs中做这样的事情，但是当我开始学习react-native时它不起作用，你能告诉我如何执行这样的任务吗？

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;