在React中按名称禁用和取消选中复选框

Question

我有多个复选框，但条件是在特定名称检查时禁用该复选框。我已经实现了这一点，但问题是，当您首先选中其他复选框，然后选中要禁用的复选框时，复选框复选框仍然存在。我已经在stackblitz上发布了代码，如果你想看看的话。所以在下面的代码中，我想在点击"All ages“时禁用所有的复选框。但是，当您选中其他复选框，然后选中“所有年龄”复选框时，选中的复选框仍然存在，您可以取消选中该复选框。如何在禁用后取消选中该复选框。

​

// Example stateless functional component


// Example class component
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      checkedItems: {}
    };
  }
  handleChange = (event, formKey) => {
    const { name, checked } = event.target;
    const updatedCheckedItems = { ...this.state.checkedItems, [name]: checked };
    this.setState(
      {
        checkedItems: updatedCheckedItems
      },
      () => console.log(this.state.checkedItems)
    );
  };
  
  render = () => {
    const checkedValues = { ...this.state.checkedItems };
    const checkboxes = [
      {
        name: "3-5",
        key: "1",
        label: "3-5"
      },
      {
        name: "6-7",
        key: "2",
        label: "6-7"
      },
      {
        name: "8-10",
        key: "3",
        label: "8-10"
      },
      {
        name: "11-13",
        key: "4",
        label: "11-13"
      },
      {
        name: "14-18",
        key: "5",
        label: "14-18"
      },
      {
        name: "18+",
        key: "6",
        label: "18+"
      },
      {
        name: "All ages",
        key: "7",
        label: "All ages"
      }
    ];
    
    return (
      <div className="App">
        <h1>App Component</h1>
        {checkboxes.map(item => (
          <label key={item.name}>
            <input
              type="checkbox"
              name={item.name}
              checked={this.state.checkedItems[item.name] || false}
              onChange={this.handleChange}
              disabled={!checkedValues[item.name] && checkedValues["All ages"]}
            />
            {item.name}
          </label>
        ))}
      </div>
    )
  }
}

// Render it
ReactDOM.render(
  <App />,
  document.getElementById("react")
);

<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

​

StackBlitz

Answer 1

在您的handleChange函数中，您应该进行如下更改：

  handleChange = (event, formKey) => {
    const { name, checked } = event.target;
    // Changed line
    const updatedCheckedItems = name === 'All ages' ? { [name]: checked } : { ...this.state.checkedItems, [name]: checked };
    this.setState(
      {
        checkedItems: updatedCheckedItems
      },
      () => console.log(this.state.checkedItems)
    );
  };

如果复选框名为All ages，则应该删除所有其他复选框，否则，只需像往常一样在状态对象上再添加一个属性。

Answer 2

当您选择最后一个时，将此选项设置为清除所有其他选定项。希望我能正确理解你。

StackBlitz

if (name === 'All ages') this.state.checkboxes.filter((option) => option.name !== name).forEach((option) => {
      console.log(option);
      updatedCheckedItems[option.name] = false;
    });