Question

我正在处理React组件，并且有3个复选框。我的要求是，当选中第3个复选框时，以前选中的前2个复选框中的任何一个都应变为未选中状态并被禁用。取消选中第3个复选框时，以前选中的所有复选框都应重新选中。

前两个复选框是从这样的数组中动态填充的：

{credits.map((section, i) => (
          <p key={i}>
            <input
              disabled={this.state.checkedChkBox === "noneApply"}
              id={`amtChk${i + 1}`}
              type="checkbox"
              name="amountCheck"
              value={`${section.amount} - ${section.date}`}
            />
            <label htmlFor={`amtChk${i + 1}`} id={`amtLbl${i + 1}`}>
              {section.amount}
            </label>
          </p>
        ))}

第三个复选框如下

<input onChange={evt => this.noneApplyChk(evt)} id="noneApply" type="checkbox" name="noneApplyCheck" value="noneApply" />
        <label htmlFor="noneApply" id="noneApplyLbl">
          None apply
        </label>

在构造函数中，我定义了一个状态来处理前两个复选框的禁用。

constructor(props) {
super(props);
this.state = { checkedChkBox: "" };

}

这就是我的noneApplyChk函数的样子

noneApplyChk(evt) {
if (this.state.checkedChkBox === "noneApply") {
  this.setState({ checkedChkBox: "" });
} else {
  this.setState({ checkedChkBox: evt.target.id });
}

}

它很好地禁用/启用了前2个复选框，但是我仍然无法找到一种方法来取消/启用第3个复选框的前2个复选框。我还在前2个复选框中尝试了checked={this.state.checkedChkBox !== "noneApply" || this.state.checkedChkBox !== ""}以及onChange事件。那也没有帮助。

请让我知道是否有人有任何想法。

PS：我想以反应方式而不是jquery方式来实现。

Answer 1

这是一种方法：

import React from "react";
import ReactDOM from "react-dom";

class App extends React.Component {
  // some example state
  state = {
    a: { curr: false, prev: false, disabled: false },
    b: { curr: false, prev: false, disabled: false },
    c: false
  };

  toggleOthers = () => {
    if (this.state.c) {
      this.setState({
        a: { curr: false, prev: this.state.a.curr, disabled: true },
        b: { curr: false, prev: this.state.b.curr, disabled: true }
      });
    } else {
      this.setState({
        a: {
          curr: this.state.a.prev,
          prev: this.state.a.curr,
          disabled: false
        },
        b: { curr: this.state.b.prev, prev: this.state.b.curr, disabled: false }
      });
    }
  };

  toggleA = () => {
    this.setState({
      a: { curr: !this.state.a.curr, prev: !this.state.a.curr }
    });
  };

  toggleB = () => {
    this.setState({
      b: { curr: !this.state.b.curr, prev: !this.state.b.curr }
    });
  };

  toggleC = () => {
    this.setState(
      {
        c: !this.state.c
      },
      () => {
        this.toggleOthers();
      }
    );
  };

  render() {
    return (
      <React.Fragment>
        <input
          type="checkbox"
          onChange={this.toggleA}
          checked={this.state.a.curr}
          disabled={this.state.a.disabled}
        />
        <input
          type="checkbox"
          onChange={this.toggleB}
          checked={this.state.b.curr}
          disabled={this.state.b.disabled}
        />
        <input
          type="checkbox"
          onChange={this.toggleC}
          checked={this.state.c.curr}
        />
      </React.Fragment>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

CodeSandbox here。

在React中选中另一个复选框后，如何取消选中该复选框？

1 个答案: