redux-form 中的多个复选框
[英] Multiple checkbox in redux-form
本文介绍了redux-form 中的多个复选框的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想问一下,这是场景.我有这个多个复选框,但我的问题是每当我勾选一个复选框时,所有 4 个复选框都被选中.还有为什么复选框的值只是真或假.这是我的复选框:
<label><Field name="investor_stage" component="input" type="checkbox" value="Seed"/>种子标签>
<div className="复选框"><label><Field name="investor_stage" component="input" type="checkbox" value="Early Stages"/>早期阶段
<div className="复选框"><label><Field name="investor_stage" component="input" type="checkbox" value="Formative Stages"/>形成阶段
<div className="复选框"><label><Field name="investor_stage" component="input" type="checkbox" value=" later Stages"/>后期阶段
解决方案
对于像我这样刚接触 redux 和 react 的人,可能会发现提到的原始代码 这里 令人困惑.我修改并将其转换为 ES6 类.我还删除了引导程序、验证并使其易于调试.
这是修改后的代码
从'react'导入React;class CheckboxGroup 扩展 React.Component {复选框组(){让 {label, required, options, input, meta} = this.props;返回 options.map((option, index) => {返回 (<div className="checkbox" key={index}><标签><输入类型=复选框"name={`${input.name}[${index}]`}值={option.name}选中={input.value.indexOf(option.name) !== -1}onChange={(事件)=>{const newValue = [...input.value];如果(事件.目标.检查){newValue.push(option.name);} 别的 {newValue.splice(newValue.indexOf(option.name), 1);}返回 input.onChange(newValue);}}/>{option.name}标签></div>)});}使成为() {返回 (<div>{this.checkboxGroup()}
)}}导出默认复选框组;
用法:
let optionsList = [{id: 1, name: 'Optoin1'}, {id: 2, name: 'Option 2'}, {id: 3, name: 'Option 3'}]<Field name="roles" component={CheckboxGroup} options={optionsList}/>
I would like to ask, here's the scenario. I have this multiple checkbox but my problem is whenever I tick one checkbox, all of the 4 checkboxes are selected. And also why is it the value of checkbox is just true or false.Here's my checkbox:
<div className="checkbox">
<label><Field name="investor_stage" component="input" type="checkbox" value="Seed" /> Seed</label>
</div>
<div className="checkbox">
<label><Field name="investor_stage" component="input" type="checkbox" value="Early Stages" /> Early Stages</label>
</div>
<div className="checkbox">
<label><Field name="investor_stage" component="input" type="checkbox" value="Formative Stages" /> Formative Stages</label>
</div>
<div className="checkbox">
<label><Field name="investor_stage" component="input" type="checkbox" value=" Later Stages" /> Later Stages</label>
</div>
解决方案
For people like me who are new to redux and react may find the original code mentioned here confusing. I modified and converted it to an ES6 class. I also Removed bootstrap, validation and made it easy to debug.
Here is the modified code
import React from 'react';
class CheckboxGroup extends React.Component {
checkboxGroup() {
let {label, required, options, input, meta} = this.props;
return options.map((option, index) => {
return (
<div className="checkbox" key={index}>
<label>
<input type="checkbox"
name={`${input.name}[${index}]`}
value={option.name}
checked={input.value.indexOf(option.name) !== -1}
onChange={(event) => {
const newValue = [...input.value];
if (event.target.checked) {
newValue.push(option.name);
} else {
newValue.splice(newValue.indexOf(option.name), 1);
}
return input.onChange(newValue);
}}/>
{option.name}
</label>
</div>)
});
}
render() {
return (
<div>
{this.checkboxGroup()}
</div>
)
}
}
export default CheckboxGroup;
Usage:
let optionsList = [{id: 1, name: 'Optoin1'}, {id: 2, name: 'Option 2'}, {id: 3, name: 'Option 3'}]
<Field name="roles" component={CheckboxGroup} options={optionsList} />
这篇关于redux-form 中的多个复选框的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!