靜態元素的交互

Question

我有以下代碼：

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