web-dev-qa-db-ja.com

反応するMaterial-ui、onClick for buttonを使用できることをどのように確認できますか？

ドキュメントのプロパティのリストにonClickが含まれていません（ http://www.material-ui.com/#/components/icon-button ）

クリックハンドラーでonClickを使用する必要があることを確認するにはどうすればよいですか？

reactjsmaterial-ui
42
eugene

Material-UIドキュメントには、標準のReact（ネイティブブラウザー）イベントがリストされていません。

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

これは、使用可能なネイティブイベントを既に認識していることが期待されるためです。たとえば、onWheelも使用できます。すべてのネイティブイベントが含まれている場合、長く冗長なリストになります。

kouakの説明 のように、他の小道具（onClickなど）は関連する子コンポーネントに渡されます。

ランダムな例：

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

<IconButton/>にラッパーを追加して、onClickイベントを取得できます。

例

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

これは間違いなく機能するはずです...

4
Pranesh Ravi

<IconButton />に渡す小道具にonClickを追加するだけです。

ドキュメントで引用されていない小道具は、onClickを正常に処理する内部<EnhancedButton />コンポーネントに渡されます。

こちらをご覧ください： https://github.com/callemall/material-ui/blob/master/src/IconButton/IconButton.js#L241

3
kouak