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

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

我们正在使用自定义数据绑定。在页面加载时，我们使用jQuery为select赋值

以编程方式更改select的值必须更新匹配的复选框

当用户选中/取消选中复选框时，必须在“选择”按钮上切换相应的值

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

这是我的简化代码

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>

状态={
项目：[
{键：1，值：“A”}，
{键：29，值：“Z”}
],
选定：[1,29]
}
函数onSelectChange（）{
//更新复选框
}
函数onCheckboxChange（）{
//更新所选选项
}
{this.state.items.map（（item，i）=>
{item.Value}
)}
{this.state.items.map（（item，i）=>
= 0}
onChange={onCheckboxChange}/>
)}

您可以在事件处理程序中使用

this.setState（{}）

来更新React中组件的状态。这将在React中触发重新加载程序，允许您查询更新状态（

This.state.selected

）

请注意，

this.setState（）

需要一个不可变的对象，因此您永远不应该更改以前的状态对象，而应该始终设置一个新的状态对象

对评论的答复：

对于selectItem：

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

对于复选框（请注意前一状态）：

使用方法：

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

{this.state.items.map（（item，i）=>
= 0}
onChange={onCheckboxChange（项目）}/>
)}

---

这样做的缺点是，它会在每个重新渲染器上创建一个新函数，因此最好创建一个自定义CheckboxItem并将该项传递给它，然后使用

handleClick

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

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

---

我知道设置状态，问题是如何获得需要设置的状态。因为我需要从支票箱里读出来，请解释一下你做了什么。避免只回答代码

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