76

Die Liste der Eigenschaften im Dokument enthält keine Informationen onClick ( http://www.material-ui.com/#/components/icon-button ).

Woher weiß ich, dass ich onClick für den Klick-Handler verwenden muss?

reactjs material-ui

— Eugen
quelle

Was meinst du ? Woher weiß ich, dass ich onClick für den Klick-Handler verwenden muss ?

— Andrew Li

3

Sie können es gut verwenden, aber das ist das geringste Ihrer Probleme, wenn Sie Material-UI mit React verwenden.

— Zug

@OrthoHomeDefense Gibt es eine bekannte Bekanntheit von Material ui mit reagieren? Ich habe gerade angefangen, mein erstes Projekt in Reaktion und Verwendung von Material ui überall möglich zu machen, und jetzt erschrecken Sie mich: |

— AsifM

1

@AsifMD Hmm ... Es ist über drei Jahre her, seit ich es verwendet habe, so dass die Dinge vielleicht anders sind, aber soweit ich mich erinnere, refswar es sehr schwierig , so etwas zu verwenden, weil man ungefähr 15 Eigenschaften in einer Hierarchie durchlaufen musste, um ihre zu finden Komponenten und ich brachen immer wieder die Kapselung von Komponenten. Das Problem damit wird refsfür Dom-Elemente von Drittanbietern empfohlen. Denken Sie daran, dass dies vor über 3 Jahren war, also hätte sich viel ändern können.

— Zug

84

In der Material-UI-Dokumentation sind die Standardereignisse React (nativer Browser) nicht aufgeführt:

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

Dies liegt daran, dass Sie voraussichtlich bereits über die verfügbaren nativen Ereignisse informiert sind. Zum Beispiel können Sie auch verwenden onWheel. Es wäre eine lange und redundante Liste, wenn alle nativen Ereignisse enthalten wären.

Wie Kouak erklärt , werden andere Requisiten (wie z. B. onClick) an eine relevante untergeordnete Komponente weitergegeben.

Zufälliges Beispiel:

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

— dreißig Punkte
quelle

8

Sie können einen Wrapper über das hinzufügen, um das <IconButton/>zu erhaltenonClick Ereignis abzurufen.

Beispiel

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

Das sollte auf jeden Fall funktionieren ...

— Pranesh Ravi
quelle

6

Die Dokumentation wäre viel nützlicher, wenn sie den Vererbungsbaum bis zur Basisklasse mit Links zur Dokumentation der einzelnen Klassen anzeigen würde. Ein gutes Beispiel dafür ist die Art und Weise, wie die Microsoft .NET Framework- und MFC-Bibliotheken dokumentiert sind.

— David A. Gray

2

@ DavidA.Gray Sie sollten ein Problem an das Projekt senden, es wäre auf jeden Fall schön, die Vererbungskette für eine Material-UI-Klasse zu sehen

5

onClickFügen Sie einfach die Requisiten hinzu, in die Sie weitergeben <IconButton />.

Requisiten, die nicht im Dokument aufgeführt sind, werden an ihre interne <EnhancedButton />Komponente weitergegeben, die problemlos onClickfunktioniert.

Siehe hier: https://github.com/callemall/material-ui/blob/master/src/IconButton/IconButton.js#L241

— Kouak
quelle

6

Die Verbindung ist unterbrochen

— Cyrf

5

Denken Sie daran, dass Sie onClick in jeder einzelnen Komponente verwenden können, die über einen DOM-Renderer verfügt, da es sich um ein natives React-Ereignis handelt (es muss keine Schaltflächenkomponente sein).

Beispiel 1:

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

Beispiel 2:

⬇ Online damit spielen ⬇

— Hasan Sefa Ozalp
quelle

0

Umgang mit Klicks

Alle Komponenten akzeptieren einen onClickHandler, der auf das Stamm-DOM-Element angewendet wird.

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

Beachten Sie, dass in der Dokumentation vermieden wird, native Requisiten (es gibt viele) im API-Abschnitt der Komponenten zu erwähnen. API für Button

— Code
quelle

reagieren Material-ui, Woher weiß ich, dass ich die Schaltfläche onClick for verwenden kann?

Umgang mit Klicks