Javascript 在React中禁用开关按钮

如果我单击年度单选按钮，则开关按钮（标记为“半天”）应隐藏或禁用（仅适用于年度单选按钮）。我该怎么做呢

<RadioGroup onChange={this.onChange} value={this.state.leavevalue}>
    <Radio value={1}>Casual</Radio>
    <Radio value={2}>Medical</Radio>
    <Radio value={3}>Annual</Radio>
    <Radio value={4}>Lieu</Radio>
    <Radio value={5}>Special</Radio>
    <Radio value={6}>Maternity</Radio>
    <Radio value={7}>Paternity</Radio>
    <Radio value={8}>NoPay</Radio>
</RadioGroup>

我的单选按钮和开关按钮：

---

一个简单的条件语句可以：

onChange = (e) => {
    this.setState({
      leavevalue: e.target.value,
      isHalfDay: false,
      isHalfDayHidden: e.target.value === 3
    });
  }

和另一个显示或隐藏开关的条件

{!this.state.isHalfDayHidden && (
  <Switch onChange={this.handleHalfDay} checked={this.state.isHalfDay} />
)}

{！this.state.isHalfDayHidden&&(
)}

一个简单的条件语句可以：

onChange = (e) => {
    this.setState({
      leavevalue: e.target.value,
      isHalfDay: false,
      isHalfDayHidden: e.target.value === 3
    });
  }

和另一个显示或隐藏开关的条件

{!this.state.isHalfDayHidden && (
  <Switch onChange={this.handleHalfDay} checked={this.state.isHalfDay} />
)}

{！this.state.isHalfDayHidden&&(
)}

当

leavevalue

状态变量等于

3

时，可以禁用

开关

示例

class App extends React.Component {
  state = {
    leavevalue: 1,
    isHalfDay: true
  };

  handleChange = value => {
    this.setState({ leavevalue: value });
  };

  handleHalfDay = () => {
    this.setState(previousState => {
      return { isHalfDay: !previousState.isHalfDay };
    });
  };

  render() {
    return (
      <div>
        <RadioGroup
          selectedValue={this.state.leavevalue}
          onChange={this.handleChange}
        >
          <Radio value={1} />Casual
          <Radio value={2} />Medical
          <Radio value={3} />Annual
          <Radio value={4} />Lieu
          <Radio value={5} />Special
          <Radio value={6} />Maternity
          <Radio value={7} />Paternity
          <Radio value={8} />NoPay
        </RadioGroup>
        <Switch
          onChange={this.handleHalfDay}
          checked={this.state.isHalfDay}
          disabled={this.state.leavevalue === 3}
        />
      </div>
    );
  }
}

类应用程序扩展了React.Component{
状态={
价值：1，
伊莎尔菲：是的
};
handleChange=值=>{
this.setState（{leavevalue:value}）；
};
handleHalfDay=（）=>{
this.setState（previousState=>{
返回{isHalfDay:！previousState.isHalfDay}；
});
};
render（）{
返回(
随便的
医学的
每年的
代替；场所，处所
特殊的
怀孕
父亲的身份
不可能
);
}
}
当
leavevalue
状态变量等于
3
时，可以禁用
开关

示例

class App extends React.Component {
  state = {
    leavevalue: 1,
    isHalfDay: true
  };

  handleChange = value => {
    this.setState({ leavevalue: value });
  };

  handleHalfDay = () => {
    this.setState(previousState => {
      return { isHalfDay: !previousState.isHalfDay };
    });
  };

  render() {
    return (
      <div>
        <RadioGroup
          selectedValue={this.state.leavevalue}
          onChange={this.handleChange}
        >
          <Radio value={1} />Casual
          <Radio value={2} />Medical
          <Radio value={3} />Annual
          <Radio value={4} />Lieu
          <Radio value={5} />Special
          <Radio value={6} />Maternity
          <Radio value={7} />Paternity
          <Radio value={8} />NoPay
        </RadioGroup>
        <Switch
          onChange={this.handleHalfDay}
          checked={this.state.isHalfDay}
          disabled={this.state.leavevalue === 3}
        />
      </div>
    );
  }
}

类应用程序扩展了React.Component{
状态={
价值：1，
伊莎尔菲：是的
};
handleChange=值=>{
this.setState（{leavevalue:value}）；
};
handleHalfDay=（）=>{
this.setState（previousState=>{
返回{isHalfDay:！previousState.isHalfDay}；
});
};
render（）{
返回(
随便的
医学的
每年的
代替；场所，处所
特殊的
怀孕
父亲的身份
不可能
);
}
}
code.radio组中没有这样的开关-它是什么库的一部分？code.radio组中没有这样的开关-它是什么库的一部分？也许，您可以尝试
e.target.value==4
。值可能是字符串。您可以尝试
e.target.value==4
。值可能是字符串。