bind () не запускается, когда onClick используется для выпадающего элемента - PullRequest
0 голосов
/ 07 ноября 2018

Почему мой компонентный метод onClick не запускается? когда пользователи щелкают раскрывающийся элемент, он должен активировать следующий метод с использованием функции .bind (), но вместо этого ничего не происходит, это прекрасно работает при применении в других частях моего приложения на более высоком уровне компонентов.

Typescript Файл, в котором отображается компонент:

export const Options = props => (
  <div>
    <Dropdown isOpen={props.modalDropDown} toggle={props.toggleDropDown.bind()}>
      <DropdownToggle caret>{props.totalWorkloadOptions.optionTitle}</DropdownToggle>
      <DropdownMenu>
        {props.totalWorkloadOptions.options.map(op => (
          // tslint:disable-next-line:no-invalid-this
          <DropdownItem key={op} onClick={props.appendChoiceList.bind(props.totalWorkloadOptions.optionTitle, op)}>
            {op}
          </DropdownItem>
        ))}
      </DropdownMenu>
      <strong> {props.totalWorkloadOptions.optionDescription} </strong>
    </Dropdown>
    <br />
  </div>
);

Метод, который я пытаюсь связать с:

appendChoiceList = (title: string, selected: string) => {
    console.log('selected:' + selected);
    console.log('new choice:' + title);
    const newOptionRequest: IWorkloadRequest = {
      optionTitle: title,
      selectedOption: selected
    };

    // tslint:disable-next-line:prefer-const
    for (let item of this.state.userChoices) {
      console.log(item);
      if (item.optionTitle === newOptionRequest.optionTitle) {
        // If user has already selected this before repalce it
        console.log(item);
        // tslint:disable-next-line:prefer-const
        let i = this.state.userChoices.indexOf(item);
        console.log(i);
        this.state.userChoices[i] = newOptionRequest;
      } else {
        // if this choice has not been set before
        this.state.userChoices.push(newOptionRequest);
      }
    }
  };

1 Ответ

0 голосов
/ 07 ноября 2018

Я полагаю, что вы пытаетесь пойти на

onClick={() => props.appendChoiceList(props.totalWorkloadOptions.optionTitle, op)}

Не .bind()

Я думаю, вы неправильно поняли .bind. Посмотрите на синтаксис от https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind

...