76

Список властивостей документа не включає onClick ( http://www.material-ui.com/#/components/icon-button )

Як я знаю, що мені потрібно використовувати onClick для обробника кліків?

reactjs material-ui

Що ви маєте на увазі? Як я знаю, що мені потрібно використовувати onClick для обробника кліків ?

— Ендрю Лі

3

Ви можете використовувати його чудово, але це найменша з ваших проблем при використанні матеріального інтерфейсу з React.

— Поїзд

@OrthoHomeDefense Чи існує якась відома відомість матеріалу інтерфейсу користувача з реакцією? Я щойно почав робити свій перший проект з реагування та використовував матеріал ui всюди, де це можливо, і тепер ви мене лякаєте: |

— AsifM

1

@AsifMD Хм ... Минуло вже більше трьох років з того моменту, як я ним користуюся, тому речі можуть бути інакшими, але з того, що я пам’ятаю, використовувати щось подібне refsбуло дуже важко, тому що потрібно було пройти як 15 властивостей за ієрархією, щоб знайти їх компоненти, і я продовжував порушувати інкапсуляцію компонентів. Проблема з цим refsрекомендується для сторонніх елементів дому. Тільки пам’ятайте, це було понад 3 роки тому, тому багато чого могло змінитися.

— Поїзд

84

Документація Material-UI не містить стандартних подій React (власний браузер):

https://facebook.github.io/react/docs/events.html#mouse-events

Це тому, що, як очікується, ви вже знаєте про наявні рідні події. Наприклад, ви також можете використовувати onWheel. Це був би довгий і зайвий список, якби були включені всі рідні події.

Як пояснює куак , інші реквізити (такі як onClick) передаються відповідному дочірньому компоненту.

Випадковий приклад:

<Button color="primary" onClick={() => { console.log('onClick'); }}>
    Primary
</Button>

— тридцятьточок
джерело

8

Ви можете додати обгортку над, <IconButton/>щоб отримати onClickподію.

Приклад

render() {
  return <div class="font-icon-wrapper" onClick={this.fontIconClick}>
    <IconButton iconClassName="muidocs-icon-custom-github" />
  </div>
}

Це неодмінно має спрацювати ...

— Пранеш Раві
джерело

6

Документація була б набагато кориснішою, якби вона відображала дерево успадкування аж до базового класу із посиланнями на документацію кожного з них. Хорошим прикладом того, що я маю на увазі, є спосіб документування бібліотек Microsoft .NET Framework та MFC.

— Девід А. Грей

2

@ DavidA.Gray, ви повинні подати випуск до проекту, безумовно було б непогано бачити ланцюжок успадкування для класу матеріального інтерфейсу користувача

7

Пам'ятайте, ви можете використовувати onClick у кожному компоненті singe, який має візуалізатор DOM, оскільки це рідна подія React (це не обов'язково повинен бути компонентом кнопки).

Приклад 1:

<Paper
  className={classes.paper}
  onClick={() => {
    alert("✔️ This works on every component!");
  }}
>
  Click me!
</Paper>

Приклад 2:

Грайте з нею в Інтернеті ⬇

— Хасан Сефа Озалп
джерело

5

Просто додайте onClickдо реквізиту, в який передаєтесь <IconButton />.

Реквізит, який не цитується в документі, передається у їх внутрішній <EnhancedButton />компонент, який onClickчудово справляється .

Дивіться тут: https://github.com/callemall/material-ui/blob/master/src/IconButton/IconButton.js#L241

— кауак
джерело

7

посилання розірвано

— cyrf

0

Обробка кліків

Усі компоненти приймають onClickобробник, який застосовується до кореневого елемента DOM.

<Button onClick={() => { alert('clicked') }}>Click me</Button>

Зауважте, що документація уникає згадування власних реквізитів (їх дуже багато) у розділі API компонентів. API для кнопки

— Код
джерело

реагувати Material-ui, як я знаю, що я можу використовувати onClick for button?

Обробка кліків