reactjs - React Native onChangeText 就像 ReactJS 中的 onChange

Question

我同时学习 ReactJS 和 React Native。我在一个 udemy 教程中看到了一些非常漂亮的东西，教授只使用了一个 onChange 方法，对于所有输入并利用“名称”属性，他可以这样做：

const onChange = event =>
    setFormData({ ...formData, [event.target.name]: event.target.value });

所以他说，我们可以只有一个，而不是为每个 onChange，在每个输入内部，一个不同的方法。

这是我正在谈论的代码：

const Register = props => {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    password: '',
    password2: ''
  });

  const { name, email, password, password2 } = formData;
  const onChange = event =>
    setFormData({ ...formData, [event.target.name]: event.target.value });

  const onSubmit = async event => {
    event.preventDefault();
    if (password !== password2) {
      props.setAlert('Passwords do not match', 'danger', 5000);
    } else {
      props.registerUser({ name, email, password });
    }
  };


  if (props.isAuthenticated) {
    return <Redirect to="/dashboard" />;
  }
  return (
    <Fragment>
      <h1 className="large text-primary">Sign Up</h1>
      <p className="lead">
        <i className="fas fa-user" /> Create Your Account
      </p>
      <form className="form" onSubmit={event => onSubmit(event)}>
        <div className="form-group">
          <input
            type="text"
            placeholder="Name"
            name="name"
            value={name}
            onChange={event => onChange(event)}
          />
        </div>
        <div className="form-group">
          <input
            type="email"
            placeholder="Email Address"
            name="email"
            value={email}
            onChange={event => onChange(event)}
          />
          <small className="form-text">
            This site uses Gravatar so if you want a profile image, use a
            Gravatar email
          </small>
        </div>
        <div className="form-group">
          <input
            type="password"
            placeholder="Password"
            name="password"
            // minLength="6"
            value={password}
            onChange={event => onChange(event)}
          />
        </div>
        <div className="form-group">
          <input
            type="password"
            placeholder="Confirm Password"
            name="password2"
            value={password2}
            onChange={event => onChange(event)}
          />
        </div>
        <input type="submit" className="btn btn-primary" value="Register" />
      </form>
      <p className="my-1">
        Already have an account? <Link to="/login">Sign In</Link>
      </p>
    </Fragment>
  );
};

在 React Native 中，与另一位教授一起，我试图思考如何做到这一点。我尝试了几天从 TextInput 提供的道具，但在我看来，不能使用我们如何在 ReactJS 中使用“名称”属性。

这是 React Native 应用程序的代码：

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

class PlaceInput extends Component {
  state = {
    userName: '',
    placeName: ''
  }

  userNameChangeHandler = (value) => {
    this.setState({ userName: value })
  }

  placeNameChangeHandler = (value) => {
    this.setState({ placeName: value })
  }

  placeSubmitHandler = () => {
    if (this.state.placeName.trim() === '') {
      return;
    }

    this.props.onPlaceAdded(this.state.placeName)
  }

  render() {
    return (
      <View style={styles.inputContainer}>
        <TextInput
          style={styles.placeInput}
          value={this.state.userName}
          onChangeText={this.userNameChangeHandler}
          placeholder='User Name' />
        <TextInput
          style={styles.placeInput}
          value={this.state.placeName}
          onChangeText={this.placeNameChangeHandler}
          placeholder='Beautiful place' />
        <Button title='Add' style={styles.placeButton} onPress={this.placeSubmitHandler} />
      </View>
    );
  }
};

请有人帮助我理解：在 React Native 中可以有一个 onChangeText 方法，就像 ReactJS 的教授对 onChange 所做的那样？

标签： reactjsreact-native

Answer 1

尝试将输入“名称”作为值传递给处理函数。像这样：

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

class PlaceInput extends Component {
  state = {
    userName: '',
    placeName: ''
  }

  handleInputChange = (inputName, inputValue) => {
    this.setState(state => ({ 
      ...state,
      [inputName]: inputValue // <-- Put square brackets
    }))
  }

  render () {
    return (
      <View style={styles.inputContainer}>
        <TextInput
          style={styles.placeInput}
          value={this.state.userName}
          onChangeText={value => this.handleInputChange('userName', value)}
          placeholder='User Name' />
        <TextInput
          style={styles.placeInput}
          value={this.state.placeName}
          onChangeText={value => this.handleInputChange('placeName', value)}
          placeholder='Beautiful place' />
      </View>
    );
  }
};