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

Question 1

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?

Question 2

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>

Question 3

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 ...

Question 4

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

Question 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 ⬇

Question 6

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

Answer 1

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

Answer 2

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

Andrew Li

Answer 3

3

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

Zug

Answer 4

@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

Answer 5

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

Answer 6

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>

Answer 7

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

Answer 8

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

Answer 9

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

Answer 10

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

Answer 11

6

Die Verbindung ist unterbrochen

Cyrf

Answer 12

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 ⬇

Answer 13

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

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

Antworten:

Umgang mit Klicks