有條件地禁用React Checkbox

Question 1

我試圖根據計數有條件地禁用react中的復選框。通過道具傳遞值是否已檢查且大于數字。我正在保存狀態中的名稱，以便在后端數據庫中進一步處理發送到。這是我的react代碼。

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"
            },

Question 2

下面的代碼片段將很適合您。您可以將對象發送到后端，最多只能有3個屬性設置為true。從codesandbox鏈接https://codesandbox.io/s/emmeiwhite-0i8yh獲取完整代碼

import React from "react";

const checkboxes = [
  {
    name: "Math and economics",
    key: "mathsandeconomics",
    label: "Math and economics",
  },
  {
    name: "Science",
    key: "science",
    label: "Science",
  },
  {
    name: "history",
    key: "history",
    label: "history",
  },
  {
    name: "literature",
    key: "literature",
    label: "literature",
  },
];

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

    this.state = {
      checkedItems: {},
      count: 0,
    };
  }

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

    this.setState({
      checkedItems: updatedCheckedItems,
      count: Object.values(updatedCheckedItems).filter((value) => value).length,
    });
  };

  render = () => {
    const checkedValues = { ...this.state.checkedItems };
    const checkedCount = Object.values(checkedValues).filter((value) => value)
      .length;

    console.log(this.state.checkedItems);

    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}
              disabled={!checkedValues[item.name] && checkedCount > 2}
            />
            {item.name}
          </label>
        ))}
      </div>
    );
  };
}

export default CheckboxComponent;

Answer 1

下面的代碼片段將很適合您。您可以將對象發送到后端，最多只能有3個屬性設置為true。從codesandbox鏈接https://codesandbox.io/s/emmeiwhite-0i8yh獲取完整代碼

import React from "react";

const checkboxes = [
  {
    name: "Math and economics",
    key: "mathsandeconomics",
    label: "Math and economics",
  },
  {
    name: "Science",
    key: "science",
    label: "Science",
  },
  {
    name: "history",
    key: "history",
    label: "history",
  },
  {
    name: "literature",
    key: "literature",
    label: "literature",
  },
];

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

    this.state = {
      checkedItems: {},
      count: 0,
    };
  }

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

    this.setState({
      checkedItems: updatedCheckedItems,
      count: Object.values(updatedCheckedItems).filter((value) => value).length,
    });
  };

  render = () => {
    const checkedValues = { ...this.state.checkedItems };
    const checkedCount = Object.values(checkedValues).filter((value) => value)
      .length;

    console.log(this.state.checkedItems);

    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}
              disabled={!checkedValues[item.name] && checkedCount > 2}
            />
            {item.name}
          </label>
        ))}
      </div>
    );
  };
}

export default CheckboxComponent;

有條件地禁用React Checkbox

熱門問答

不同顏色的Seaborn連接條形圖

jenkins錯誤：hudson.remoting.ProxyException：net.sf.json.JSONException：無效的JSON字符串

如何為單頁產品提供信息

Laravel Eloquent其中字符串列

用完全相同的格式替換python中的一行

python多態性重載問題

棋盤的排列的問題，怎么使用 C 語言合理實現的

PHP中如何檢測并讀取PDF文件的文本內容

在PHP中，如何正確地綁定參數到預處理語句

MySql安裝，net start mysql后出錯

怎么讓前端頁面根據數據庫內容生成整個DIV模塊，然后將想要的內容顯示在上面？

在數組前面添加元素