react-根據輸入名稱設置輸入屬性

Question

我有一個復選框輸入：

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

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

現在，我想編寫一個函數將此復選框的checked設置為true（onClick函數位於另一個React元素上，而不是復選框本身）：

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

但是我不知道該怎么做（上面的代碼什么都不做）。 如何找到基於特定道具的反應成分？

Answer 1

您必須在Checkbox和功能名稱中添加onClick屬性。

在on click函數中，您應該獲取事件作為參數，並檢查evet.target.checked這是復選框的屬性，以顯示單擊狀態。

如果引用全部位於同一組件中，則無需使用引用。

有麻煩請告訴我

Answer 2

維護一個狀態ID，該狀態對象具有ID到復選框狀態的映射，然后基於ID的onClick更改狀態

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})
    }

Answer 3

您可以執行以下操作：

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

不知道如果此復選框被在同一組件壽渲染，所以引用this可能是錯誤的。

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