Одно событие размытия на нескольких входах

У меня есть 2 входа (имя, фамилия) и я хочу связать одно событие размытия. Как к этому подойти?

class SimpleForm extends React.Component {
    state = {
      firstName: "",
      firstNameError: "",
      lastName: "",
      lastNameError: ""
    };

    validateName = name => {
        const regex = /[A-Za-z]{3,}/;

        return !regex.test(name)
          ? "The name must contain at least three letters. Numbers and special characters are not allowed."
          : "";
      };

    onLastNameBlur = () => {
        const { lastName } = this.state;

        const lastNameError = this.validateName( lastName) ;

        return this.setState({ lastNameError });
      };

    onFirstNameBlur = () => {
        const { firstName } = this.state;

        const firstNameError = this.validateName( firstName );

        return this.setState({ firstNameError });
      };

    onNameChange = e =>
        this.setState({[e.target.name]: e.target.value});

    render() {
    const { firstNameError, firstName, lastName, lastNameError } = this.state;

    return (
      <div style = {style.form}>
        <TextField name = "firstName"
                   label = "First name:"
                   onChange = {this.onNameChange}
                   onBlur = {this.onFirstNameBlur}
                   error = {firstNameError} />

        <TextField name = "lastName"
                   label = "Last name:"
                   onChange = {this.onNameChange}
                   onBlur = {this.onLastNameBlur}
                   error = {lastNameError} />

        <Greetings firstName = {firstName} lastName = {lastName} />
      </div>
    );
    }
  }

export default SimpleForm;

если вы видите, у нас есть onLastNameBlur и onFirstNameBlur имеет аналогичный код. Этот пример я получил от https://github.com/suzdalnitski/medium-intro-реагировать

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
2
0
219
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Как и вы, onNameChange, вы можете узнать текущий ввод с помощью e.target.name;

а как узнать текущую ошибку? у нас есть состояния firstNameError и lastNameError...

user7866726 04.06.2019 14:53

Вы можете использовать оператор switch для обработки различных случаев.

Loïck M 04.06.2019 14:56

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