Отсутствует это в обработчике событий onSubmit с редукционной формой 6

Я пытаюсь использовать свои реквизиты componenet для вызова действия в обработчике событий отправки с избыточной формой 6.1.1, но в функции обработчика событий я получаю "this" is undefined. вот что я делаю:

class ForgetPasswordForm extends Component {
  xubmit (values) {
    console.log(this);
  }

  render() {
    const { handleSubmit } = this.props;
    return (
      <form onSubmit={ handleSubmit(this.xubmit) }>
      ...
    );
  };
}

Я также пробовал () => handleSubmit(this.xubmit.bind(this)) и this.xubmit.bind(this), как указано в React: это значение null в обработчике событий но ни один из них не сработал.

Вот более подробная информация о моей настройке:

  • шаблон: создать-реагировать-приложение v.0.5
  • реагировать: v.15.3.2
  • редукс: v.3.6

reactjs redux-form
person Ali Ghanavatian    schedule 08.11.2016    source источник

Ответы (4)


arrow_upward
1
arrow_downward

handleSubmit.bind(this.xubmit) таким образом внутри handleSubmit, this указывает на this.xubmit.

Я также предлагаю вам прочитать, как работает привязка.

Примечание. Я знаю только JavaScript

person Sunil B N    schedule 08.11.2016
comment
это внутри xubmit? или в render? - person Sunil B N; 08.11.2016
comment
В xubmit это моя функция обработчика событий - person Ali Ghanavatian; 08.11.2016
comment
где определяется handleSubmit? и, утешая, укажите имя метода, в котором он регистрируется. - person Sunil B N; 08.11.2016

arrow_upward
1
arrow_downward

Поскольку вы не предоставили свою функцию handleClick, я могу только предположить, что вы напрямую вызвали функцию, переданную как handleClick (fn) { fn() }, и таким образом у вас был бы доступ к контексту в этом fn. Также вы должны передать функцию обработчикам событий. Сделайте что-то вроде этого и посмотрите, работает ли это:

onSubmit={this.props.handleSubmit.bind(this.props.context, this.xubmit.bind(this))}

Вам нужно отправить контекст родительского компонента в ваш ForgetPasswordForm и привязать к нему handleSubmit, чтобы иметь доступ к контексту этого родительского компонента, и привязать this.xubmit к this, чтобы он не был undefined.

person MahdiPOnline    schedule 08.11.2016

arrow_upward
1
arrow_downward

ваша пользовательская функция отправки в основном неверна, просто отредактируйте свой код таким образом.

class ForgetPasswordForm extends Component {
 xubmit = (values) => {
  console.log(this);
 }

}

назовите это так,

<form onSubmit={handleSubmit((values) => this.xubmit(values)) }>
person amir hosein ahmadi    schedule 08.11.2016

arrow_upward
0
arrow_downward

вы должны использовать свойства класса и функцию стрелки вместе

свойства класса являются частью этапа-2

class ForgetPasswordForm extends Component {
  xubmit = (values) => {
    console.log(this);
  }

  render() {
    const { handleSubmit } = this.props;
    return <form onSubmit={ handleSubmit(this.xubmit) }>;
  };
}

Функция стрелки привязывает this к функции

person seyed    schedule 09.11.2016