Question

我有一个复选框输入：

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

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

现在我想编写一个函数，将此复选框设置为true（onClick函数在另一个React元素上，而不是复选框本身）：

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

但我不知道该怎么做（上面的代码什么也没做）。如何根据某个道具找到反应组件？

Answer 1

您必须在复选框和功能名称中添加onClick属性。

在点击功能中，您应该获取事件的参数并检查evet.target.checked 这是复选框的属性，用于显示点击状态。

如果refs全部在同一个组件中，你就不需要使用ref。

如果您遇到麻烦，请告诉我

Answer 2

维护一个状态对象，该状态对象具有id到checkbox状态的映射，然后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})
    }

Answer 3

您可以执行以下操作：

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

不确定此复选框是否在同一组件中呈现，因此对this的引用可能是错误的。

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

react - 根据输入名称设置输入道具

3 个答案: