react Material-ui. onClick for 버튼을 사용할 수 있는지 어떻게 알 수 있습니까?

react Material-ui. onClick for 버튼을 사용할 수 있는지 어떻게 알 수 있습니까?

문서의 속성 목록은 다음을 포함하지 않습니다.onClick(http://www.material-ui.com/ #/컴포넌트/아이콘 버튼)

클릭 핸들러에 onClick을 사용해야 하는지 어떻게 알 수 있습니까?

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>

래퍼를 다음에 추가할 수 있습니다.<IconButton/>을 손에 넣다onClick이벤트입니다.

예

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

이건 분명히 효과가 있을 거야...

기본 반응 이벤트이므로 DOM 렌더러가 있는 모든 단일 구성 요소에서 onClick을 사용할 수 있습니다(버튼 구성 요소일 필요는 없음).

예 1:

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

---

예 2:

⬇ 온라인으로 즐기세요 ⬇

추가만 하면 됩니다.onClick당신이 물려받은 소품들에<IconButton />.

문서에 인용되지 않은 소품은 내부로 전해집니다.<EnhancedButton />처리하는 컴포넌트onClick잘 돼가고 있습니다.

https://github.com/callemall/material-ui/blob/master/src/IconButton/IconButton.js#L241 를 참조해 주세요.

클릭 처리

모든 컴포넌트는onClick루트 DOM 요소에 적용되는 핸들러.

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

이 문서에서는 컴포넌트의 API 섹션에서 네이티브 소품(많은 소품)에 대한 언급을 회피하고 있습니다.버튼용 API

브라우저에 따라서는 하위 컴포넌트에 제공하면 이벤트가 작동하지 않을 수 있기 때문에 항상 onClick 이벤트를 부모에게 제공해야 합니다.

예:

오류:

<TextField
    label={label}
    value={state.inputValue}
    InputProps={{
        endAdornment: (
            <InputAdornment position='end'>
                <IconButton style={{ padding: '3px' }}>
                    {state.inputValue?.length > 1 ? (
                        <ClearIcon onClick={handleClear}/>
                    ) : (
                        <DateRangeIcon onClick={onAdornmentClick}/>
                    )}
                </IconButton>
            </InputAdornment>
        ),
    }}
/>

솔루션:

<TextField
    label={label}
    value={state.inputValue}
    InputProps={{
        endAdornment: (
            <InputAdornment position='end' onClick={state.inputValue?.length > 1 ? handleClear : onAdornmentClick}>
                <IconButton style={{ padding: '3px' }}>
                    {state.inputValue?.length > 1 ? (
                        <ClearIcon/>
                    ) : (
                        <DateRangeIcon/>
                    )}
                </IconButton>
            </InputAdornment>
        ),
    }}
/>

언급URL : https://stackoverflow.com/questions/40167287/react-material-ui-how-do-i-know-i-can-use-onclick-for-button