反應 - 道具基於輸入名字

我有一個複選框，輸入設定輸入：反應 - 道具基於輸入名字

import { Checkbox } from 'semantic-ui-react'; 

<Checkbox 
    checked={false} 
    ref={id} 
/>

現在我想編寫設置此複選框的選中爲true（的onClick功能繼續相互反應元素的功能，不是複選框本身）：

onClick: (id) => { 
    //Find the correct checkbox, set the prop 
    this.refs[id].checked = true; 
}

但我不知道如何做到這一點（上面的代碼什麼都不做）。我如何根據某個道具發現反應組分？

發佈完整的代碼，'複選框'是組件嗎？你如何創建它？ –

複選框是從反應語義的UI組件。 onClick函數在我使用另一個庫創建的表中成行，但它們都在同一個組件中。 –

你得到的的onClick功能的ID？ –

保持有ID映射到複選框的onClick根據id狀態，然後狀態改變對象的狀態

this.state = { 
    checked: {'12': true. '23':false} 
} 

<Checkbox 
checked={this.state.checked[id]} 
/>

如果你想切換

onClick = (id) => { 
     var checked = {...this.state.checked} 
     checked[id] = !this.state.checked[id]; 
     this.setState({checked}) 
    }

如果你只是想設置

onClick = (id) => { 
     var checked = {...this.state.checked} 
     checked[id] = true; 
     this.setState({checked}) 
    }

2017-04-19 13:45:04

你必須在複選框和功能可按名稱添加一個onClick屬性。

在點擊功能中，您應該獲取事件的參數，並檢查evet.target.checked 這是複選框的屬性以顯示點擊狀態。

你並不需要使用裁判如果都在同一個組件。

讓我知道如果你有麻煩

2017-04-19 13:37:28 partizanos

編輯的問題，我想在包含複選框，而不是真正的複選框 - 也有很多複選框的添加onClick事件，這就是爲什麼我想使用參考 –

你可以把onclick放在input-checkbox的父節點中，並且event.target仍然會選中我認爲的複選框。或者你可以選擇這樣的如果它顯示父event.target.querySelector（「輸入」） – partizanos

但其他答案也做得很好 – partizanos

你可以這樣做：

<Checkbox 
    checked={false} 
    ref={id} 
    onClick={() => { this.onClick(id); }} 
/>

不知道如果此複選框被在同一組件壽渲染，所以參考this可能是錯的。

onClick: (id) => { 
    this.refs[id].checked = true; 
}

2017-04-19 13:45:38 oirad

回答