Добавление функциональности onBlur в формы в Reactjs

У меня есть простая сборка формы в react js. Он имеет текстовую область с кнопкой отправки. Теперь я хочу добавить в эту форму функцию OnBlur. Я пробовал это в методе рендеринга:

render() {
        return (
          <form onSubmit = {this.handleSubmit}> onBlur = {this.onBlur}
            <label>
              Name:
              <input type = "text" value = {this.state.value} onChange = {this.handleChangeEvent} />
            </label>
            <input type = "submit" value = "Submit" />
          </form>
        );
      }

Но это не работает. Исходный код (из учебников FaceBook) выглядит следующим образом: Обратите внимание, что я знаю, что мне нужно привязать onBlur () через эти строки: this.onBlur = this.onBlur.bind(this);. Так что это не вызывает озабоченности.

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChangeEvent = this.handleChangeEvent.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChangeEvent(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit = {this.handleSubmit}>
        <label>
          Name:
          <input type = "text" value = {this.state.value} onChange = {this.handleChangeEvent} />
        </label>
        <input type = "submit" value = "Submit" />
      </form>
    );
  }
}
onBlur=<this.onBlur>? Вы имели в виду onBlur = {this.onBlur}
kind user 11.12.2018 00:30

похоже, ваш синтаксис JSX неверен. Заменить onBlur=<this.onBlur> на onBlur = {this.onBlur}

Dacre Denny 11.12.2018 00:31

Прошу прощения за опечатки. Редактирование произведено. Пожалуйста, просмотрите код.

Vagabond 11.12.2018 00:41

Пожалуйста, покажите пример того, что вы хотите, чтобы он делал на Blur, но это не работает.

Ryan Cogswell 11.12.2018 00:44

@Vagabond Что именно не работает. У вас есть метод handleBlur? Попробуйте <form onBlur = {this.handleBlur}> и console.info что-нибудь.

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

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