Javascript 反应输入复选框选择所有组件

我试图建立一个适当的反应输入复选框选择所有组件。这个想法是有一个组件

和

，我可以检查

，所有

也会被选中

我有两个问题

• 如果选中了
  ，则无法取消选择任何

• 如果选中了所有的
  ，则应选中

var InputCheckboxAll=React.createClass({
handleChange:函数（事件）{
此.props.handleChange（事件）
},
渲染：函数（）{
返回(
)
}
})
var InputCheckbox=React.createClass({
getInitialState:函数（）{
返回{
检查：这个。道具。检查
}
},
渲染：函数（）{
var checkedValue=this.props.allChecked？true:this.state.checked
返回(
)
}
})
var Test=React.createClass({
getInitialState:function（）{return{allChecked:false}；}，
handleChange:函数（事件）{
var$elm=$（event.target）
var checked=$elm.prop（'checked'）
这是我的国家({
全部选中：选中
})
},
渲染：函数（）{
返回(
全选：







)
}
})
React.render（，document.body）

我认为可以对您的实现进行一些修改，以更具反应性的形式实现所需的结果

首先应该去掉的是

InputCheckboxAll

checkbox类，以及

InputCheckbox

类的

allChecked

prop。复选框是一个相对愚蠢的元素，它不应该知道诸如

一切都被选中等概念

相反，复选框应该实现为一个只需选中或取消选中的项

现在，您可以重新创建渲染函数以绘制3个复选框，以及“全部选择”复选框。每个
都可以绑定到
this.state.checked
数组中自己的数据。当
更改时，我们将索引绑定到更改处理程序，以便知道要修改哪个数组元素

  render: function () {
    // Recalculate if everything is checked each render, instead of storing it
    var isAllChecked = this.state.checked.filter(function(c) {
        return c;
    }).length === this.state.checked.length;

    return (
    <div>
      Select All: <InputCheckbox 
               onChange={this.selectAll} 
               checked={isAllChecked}/><br/>

      <InputCheckbox 
               checked={this.state.checked[0]} 
               onChange={this.handleChange.bind(this, 0)}/><br/>
      <InputCheckbox 
               checked={this.state.checked[1]} 
               onChange={this.handleChange.bind(this, 1)}/><br/>
      <InputCheckbox 
               checked={this.state.checked[2]} 
               onChange={this.handleChange.bind(this, 2)}/><br/>
    </div>
    )
  }

render:function（）{
//如果每次渲染都检查了所有内容，则重新计算，而不是存储它
var isAllChecked=this.state.checked.filter（函数（c）{
返回c；
}).length==this.state.checked.length；
返回(
全选：







)
}

您不需要存储与所有选定对象相关的任何状态。相反，最好在每次渲染期间重新计算是否选择了所有内容。选中
selectall
复选框时，我们只需将
this.state.checked的每个元素设置为true

这还有一个优点，即当您手动选中所有复选框时，“全选”复选框将自动选中

下面是一个示例实现：
我很晚才发现这条线索。下面的解决方案适用于我以下的结构

有3个组件使此功能干净且可重用

复选框-可重用组件
复选框列表-可重用组件
CityList—可通过克隆创建状态列表或任何列表的最终级别
带模块的堆栈闪电战-

下面是独立代码



反应：全部选择或全部取消选择
函数复选框（{name，value，tick，onCheck}）{
返回(
{value}
);
}
函数复选框列表（{options，isCheckedAll，onCheck}）{
常量复选框选项=(
{options.map（（选项，索引）=>{
返回(
onCheck（option.value，e.target.checked）}/>
);
})}
);
返回(
onCheck（'all'，e.target.checked）}/>
{checkBoxOptions}
);
}
类CityList扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
isAllSelected:false，
检查表：[
{
名称：“城市”，
价值：“班加罗尔”，
勾选：假，
},
{
名称：“城市”，
价值：“金奈”，
勾选：假，
},
{
名称：“城市”，
价值：“德里”，
勾选：假，
}
]
};
}
onCheckBoxChange（checkName，isChecked）{
让isAllChecked=（checkName=='all'&&isChecked）；
让isAllUnChecked=（checkName=='all'&&&！isChecked）；
const checked=已检查；
const checkList=this.state.checkList.map（（城市，索引）=>{
如果（isAllChecked | | city.value==checkName）{
返回Object.assign（{}，城市{
选中的，
});
}else if（未选中）{
返回Object.assign（{}，城市{
勾选：假，
});
var InputCheckbox = React.createClass({
  getDefaultProps: function () {
    return {
      checked: false
    }
  },
  render: function () {
    return (
    <input
           checked={this.props.checked}
           type='checkbox'
           {...this.props}/>
    )
  }
})

  getInitialState: function () { 
      return {
        // 3 checkboxes, all initialized as unchecked
        checked: [false, false, false]
      }; 
  },

  render: function () {
    // Recalculate if everything is checked each render, instead of storing it
    var isAllChecked = this.state.checked.filter(function(c) {
        return c;
    }).length === this.state.checked.length;

    return (
    <div>
      Select All: <InputCheckbox 
               onChange={this.selectAll} 
               checked={isAllChecked}/><br/>

      <InputCheckbox 
               checked={this.state.checked[0]} 
               onChange={this.handleChange.bind(this, 0)}/><br/>
      <InputCheckbox 
               checked={this.state.checked[1]} 
               onChange={this.handleChange.bind(this, 1)}/><br/>
      <InputCheckbox 
               checked={this.state.checked[2]} 
               onChange={this.handleChange.bind(this, 2)}/><br/>
    </div>
    )
  }

render: function () {
  return (
    <CheckboxGroup>
      Select All: <AllCheckerCheckbox /><br/>
      <Checkbox id="option-0" onChange={this.handleChange.bind(this, 0)}/><br/>
      <Checkbox id="option-1" onChange={this.handleChange.bind(this, 1)}/><br/>
      <Checkbox id="option-2" onChange={this.handleChange.bind(this, 2)}/><br/>
    </CheckboxGroup>
  )
}

 const checkAll = (e) => {

  var value  = false

  if(e.target.checked){
    value = true;
  }
  
  Array.from(document.querySelectorAll("input[name="+name+"]"))
       .forEach((checkbox) => {
        document.getElementById(checkbox.id).checked = value;
       });
 }

 <input type="checkbox" name="all" onChange={checkAll} />

 <input type="checkbox" name={name} id={name+index} value={obj.id} />