Question

尝试构建一个react组件，我需要控制checboxes的已检查状态，并在发生更改事件时选择选项。但我不知道如何获得已选中复选框的值并设置状态。

我们正在使用自定义数据绑定。在页面加载时，我们使用jQuery分配select的选定值。

以编程方式更改select的值必须更新匹配的复选框。
当用户选中/取消选中复选框时，必须在选择中切换相应的值。

使用jQuery，我会循环使用复选框并使用选中的值构建数组，然后将此值分配给select on复选框更改。当触发选择更改事件时，我将取消选中所有复选框并检查与所选项匹配的复选框。

这是我的简化代码。

state = {
    items: [
            {Key: 1, Value: "A"},
            {Key: 29, Value: "Z"}
        ],
    selected: [1, 29]
}

function onSelectChange(){
    // Update checked checkboxes
}

function onCheckboxChange(){
    // Update selected options
}

<div>
    <select multiple onChange={onSelectChange} className="hidden">
        {this.state.items.map((item, i) =>
            <option value={item.Key}>{item.Value}</option>
        )}
    </select>

    <div className="checkboxes">
        {this.state.items.map((item, i) =>
            <input
                type="checkbox"
                key={i}
                checked={this.state.selected.indexOf(item.Key) >= 0}
                onChange={onCheckboxChange} />
        )}
    </div>
</div>

Answer 1

您可以在事件处理程序中使用this.setState({})来更新React中组件的状态。这会在React中触发重新呈现，允许您查询更新后的状态（this.state.selected）。

请注意this.setState()期望一个不可变对象，所以你永远不应该改变前一个，但总是设置一个新的状态对象！

回答评论：

对于selectItem：

onSelectChange = event => this.setState({selected:event.target.value})

和复选框（注意prevState）：

onCheckboxChange = item => event => this.setState(({selected,...prevState})=> ({
   ...prevState,
   selected: event.target.checked? selected.concat(item): selected.filter(it=> it!== item)
}))

和用法：

    {this.state.items.map((item, i) =>
        <input
            type="checkbox"
            key={i}
            checked={this.state.selected.indexOf(item.Key) >= 0}
            onChange={onCheckboxChange(item)} />
    )}

这有缺点，它将在每个重新渲染器上创建一个新功能，因此最好创建一个自定义CheckboxItem并将项目传递给它并使用handleClick。

Answer 2

onChange 函数会给出一个事件，您可以使用此选项来检查是否正在检查选择框，您可以相应地更新您的状态。

function onCheckboxChange(e){
  console.log("checked", e.target.checked);
  // Then, on the basis of boolean you can update your state
}

如何访问/引用组件内的组件值

2 个答案: