정적 요소는

Question

을 상호 작용 I가 다음 코드를

Enabled = (id) => { 
    let removal = null; 
    if (!this.props.disabled) { 
    removal = (
     <span 
     className="chipRemove" 
     onClick={() => this.onDelete(id)} 
     > 
     x 
     </span>) 
    ; 
    } 
    return removal; 
} 

가 잘 작동하지만 린터 나에게주고있다 :

jsx-a11y/no-static-element-interactions 

는 어떻게 해결할 수이 오류 (jsx-a11y에 따라)? 문서에서

Answer 1

:

적용 대화 형이 아닌 DOM 요소는 대화 형 처리기가 없습니다. <div> and <span>과 같은 정적 요소에는 마우스/키보드 이벤트 리스너가 없어야합니다. 대신 버튼 또는 링크와 같은 더 의미있는 것을 사용하십시오 ( ).

유효한 상호 작용하는 요소는 다음과 같습니다

<a> elements with href or tabIndex props 
<button> elements 
<input> elements that are not hidden 
<select> and <option> elements 
<textarea> elements 
<area> elements 

참조 : https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-static-element-interactions.md