Реквизит не передается функции onClick

Question

У меня есть onClick, который загружает данные, мне нужно передать реквизиты этой функции onclick из рендера, в котором он находится.

onClick={this.handleEditsUpload}

до

handleEditsUpload() {
  const { selected } = this.props;
}

selected показываеткак selected: [] в handleEditsUpload().

Я попытался передать реквизит, выполнив:

onClick={this.handleEditsUpload(...this.props)}

, который, как я думал, будет работать, как я делаю это в другом месте.

Не уверен, куда идти отсюда, какие-либо предложения, пожалуйста?

Answer 1

Вы отправляете onClick функции результат вместо ее ссылки.Во время onClick={this.handleEditsUpload(...this.props)} происходит то, что handleEditsUpdload вызывается с предоставленными реквизитами, тогда его возвращаемое значение (в данном случае пустое) присваивается onClick.

Если вы хотите вызвать handleEditsUpload при нажатии кнопки, укажитеэто ссылка на функцию:

onClick={() => this.handleEditsUpload(...this.props)}

Разница в том, что на этот раз вы назначаете функцию стрелки () => this.handleEditsUpload(...this.props) для onClick вместо возвращаемого значения.

Answer 2

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

Изменить

  onClick={this.handleEditsUpload(...this.props)}

На

 onClick={this.handleEditsUpload}

Поскольку этот .props доступен непосредственно внутри handleEditsUpload,

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

      this.handleEditsUpload = this.handleEditsUpload.bind(this);

Так что теперь у вас будет доступ к реквизиту внутри функции handleEditsUpload

    handleEditsUpload(){
         const { selected } = this.props;
    }

Нет необходимости передавать реквизиты в функцию-обработчик, поэтому я нене рекомендую делать это.Если вы все еще хотите использовать этот подход, тогда вызывайте функцию в виде стрелки, потому что вам нужно передать параметры

   onClick={() => this.handleEditsUpload(...this.props)}