禁用带有reactjs复选框的输入表单

时间:2020-10-27 04:19:51

标签: reactjs react-hooks

请帮助我

我想在激活清单框时禁用框输入值...

<FormGroup check className="mb-3">
        <Label check htmlFor="partial_shipment">
          <Input
            type="checkbox"
            name="partial_shipment"
            id="partial_shipment"
            onChange={onChange}
          />{" "}
          Apakah Partial Shipment?
        </Label>
      </FormGroup>

在选中我的复选框后,我要禁用...我的此框输入:

<FormGroup>
            <Label htmlFor="total_kemasan">Total Kemasan</Label>
            <Input
              type="number"
              name="total_kemasan"
              id="total_kemasan"
              onChange={onChange}
            />
          </FormGroup>

我必须做什么???与 REACT HOOKS

1 个答案:

答案 0 :(得分:1)

如果要在选中时禁用复选框,则可以更改输入的禁用属性。

const [checkBoxValue, setCheckBoxvalue] = useState(false);

<FormGroup>
        <Label htmlFor="total_kemasan">Total Kemasan</Label>
        <Input
          type="number"
          name="total_kemasan"
          disabled = {checkBoxValue}
          id="total_kemasan"
          onChange={handleCheckBox}
        />
      </FormGroup>

在onChange处理程序上,您将获得event.target.checked-

handleCheckBox = e => {
if(e.target.checked){
setCheckBoxValue(true);
}else{
setCheckBoxValue(false);
}

您可以在处理程序中更改状态的值,并在选中该复选框时将其禁用。