Раскрывающийся список действий пользовательского интерфейса CardHeader - PullRequest
Новая
       5

Раскрывающийся список действий пользовательского интерфейса CardHeader

0 голосов
/ 06 февраля 2019

Я пытаюсь добавить FormControl, компонент Select и MenuItem в реквизит действия CardHeader IconButton.

В настоящее время код выглядит следующим образом:

Рендеринг: 

<CardHeader
  action={
    <IconButton
      onClick={this.renderFilterRequest()}
    >
      <Edit />
    </IconButton>
    }
/>

Метод onClick: 

renderFilterRequest() {
  const { selection } = this.state;
  return (
    <div>
      <FormControl>
        <Select
          value={selection}
          onChange={this.handleFilterChange}
        >
          <MenuItem value='1'>January</MenuItem>
          <MenuItem value='2'>February</MenuItem>

        </Select>
      </FormControl>
    </div>
  );
}

Я получаю ошибку: onClick слушатель, чтобы быть функцией, вместо этого получил значение типа object.Как правильно отобразить выпадающее меню при щелчке действия CardHeader?

1 Ответ

0 голосов
/ 06 февраля 2019

Вы возвращаете некоторый div из this.renderFilterRequest, и вы также вызываете функцию, поэтому значение onClick становится div.Но они должны были быть функциями, верно?

Так что это должно было быть просто: onClick={this.renderFilterRequest}.
Эта функция также возвращала div, но в * 1007 нет способа прикрепить ее к логике рендеринга.*.

Вам нужно поместить MenuItems в ваш метод рендеринга и показать / скрыть их в зависимости от состояния.

Ваш прослушиватель onClick должен быть функцией, которая изменяет состояние так, чтобы элементы MenuItems становилисьvisible.

Вот простая демонстрация того, как это сделать:

Edit Material demo

...