조건부로 추가 또는 추가하지 않는 방법반응 중인 div를 클릭하세요.

조건부로 추가 또는 추가하지 않는 방법반응 중인 div를 클릭하세요.

설정 가능 여부를 알고 싶습니다.onClick내 경우 속성의 값에 따라 반응하는 div 요소에 대해canClick.

직접 확인할 수 있다는 것을 알고 있습니다.handler대신, 저는 내부에 구현될 솔루션을 찾고 있습니다.render.

...
handler(){
}

render() {
  const { canClick} = this.state
  return (
    <div onClick={this.handler}>hello</div>
  )
}
...

조건을 다음과 같이 입력합니다.

onClick={canClick ? this.handler : undefined }

작업 코드:

class App extends React.Component {
  
   _click(){
      // it will not print the value
      console.log('yes');
   }

   render(){
      return (
        <div>
          <div onClick={false ? this._click : undefined }>Click</div>
        </div>
      )
   }
}

ReactDOM.render(<App />, document.body);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

요소 속성(onClick 등)을 개체 속성으로 처리할 수 있습니다.확산 연산자를 사용하여 onClick을 확산시키십시오.

<div
  {...(canClick && { onClick: this.handler })}
>
  hello
</div>

<div onClick={canClick ? this.handler : undefined} />

위변조 값을 선택하는 경우undefined이 삼원(즉,false또는null) React(현재)는 다음 경고를 발생시킵니다.

"onClick={condition & & value}를 사용하여 조건부로 생략하는 경우 대신 onClick={condition? value: defined}를 전달합니다."

2020-01-05 편집:만false는 위의 에러를 발생시킵니다(여기서 소스코드 리액트).

네, ternaru 연산자를 사용하면 가능합니다.ternaru 연산자는 왼쪽을 부울로 평가하고 참일 경우 오른쪽 또는 폴백을 실행합니다.

<div onClick={() => canClick ? this.handler() : () => false }>hello</div>

https://stackblitz.com/edit/react-uwzn4n

이거 써도 돼

{...(condition ? { onClick: () => {handleClick()}} : {})}

이러한 목적을 위해 조건부 연산자를 추가할 수 있습니다.

handler(){
}
render() {
  const { canClick} = this.state
  return (
      <div>
       {
        (canClick) ? 
         (<div onClick={this.handler}>clickble</div>) : 
         (<div>not clickble</div>)
        }
      </div>

  )
}

다음은 해당 문서의 예시입니다.reactjs.org/docs/conditional-rendering

저는 이렇게 하겠습니다.

onClick={(canClick && this.handler) || null}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
handler(){
}    
render() {    
const { canClick} = this.state    
return (
    <div onClick={()=>{canClick&&this.handler()}}>hello</div>
  )
}

예를 들어 다음과 같은 함수가 있다고 가정해 봅시다.handleClick()사용 가능하게 하고 싶다.current하나보다 크죠?current정수 변수를 사용하면 다음과 같은 작업을 수행할 수 있습니다.

onClick={current > 1 ? handleClick : null}

언급URL : https://stackoverflow.com/questions/48223852/how-to-conditionally-add-or-not-onclick-on-a-div-in-react