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;

函数和setState函数有一些变化？

1 个答案: