时间戳

首页 > 解决方案 > 有条件地禁用 React 复选框

javascript - 有条件地禁用 React 复选框

问题描述

我正在尝试根据计数有条件地禁用反应中的复选框。通过 props 传递值是否被勾选且大于数字。我将名称保存在状态中以进一步处理它以发送到后端数据库。这是我的反应代码。

class CheckboxComponent extends Component {
        constructor(props) {
            super(props);

            this.state = {
                checkedItems: {}
            };
        }

         handleChange = (event, formKey) => {
            const {checkedItems} = this.state;
            const checkedValues = {...checkedItems};
            checkedValues[event.target.name] = event.target.checked;

            this.setState((prevState, currState) => {
                return {
                    ...prevState,
                    checkedItems: checkedValues
                }
            });
            
        };

        render = () => { 
            const {checkedItems} = this.state;
            const checkedValues = {...checkedItems};
            const checkedCount = Object.values(checkedValues).length;
            const checked = Object.values(checkedValues);
            const disabled = checkedCount >= 3; 

       return (
         <div>
           {checkboxes.map((item, index) => (
                        <label className={`form__field__input__label`} key={item.key}>
                            <Input
                                type={`checkbox`} 
                                name={item.name}
                                checked={this.state.checkedItems[item.name] || false}
                                onChange={this.handleChange}
                                formKey={'subjects'}
                                disabled={(!checked[index] && checked.length > 3)}
                            />
                            {item.name}
                        </label>
                    ))}
         </div>
       )

这是我传递的数组以呈现复选框中的值

const checkboxes = [
            {
                name: "Math and economics",
                key: "mathsandeconomics",
                label: "Math and economics"
            },
            {
                name: "Science",
                key: "Science",
                label: "Science"
            },

标签： javascriptreactjs

解决方案

  1. 您checked.length计算所有触摸的框，而不是仅选中。如果您取消选中输入，它仍然会被计算在内。true例如，仅计数Object.values(checkedValues).filter(value => value).length。
  2. 使用名称而不是索引：disabled={!checkedValues[item.name] && checkedCount > 3}

你可以在这里看到完整的解决方案：https ://codesandbox.io/s/confident-http-vlm04?file=/src/App.js

推荐阅读