如何在使用reactjs单击复选框时禁用输入字段

在使用ReactJS时，可以通过以下步骤来实现在单击复选框时禁用输入字段：

首先，创建一个React组件，包含一个复选框和一个输入字段。可以使用useState钩子来管理复选框的状态和输入字段的禁用状态。

import React, { useState } from 'react';

const CheckboxInput = () => {
  const [isChecked, setIsChecked] = useState(false);
  const [isDisabled, setIsDisabled] = useState(false);

  const handleCheckboxChange = () => {
    setIsChecked(!isChecked);
    setIsDisabled(!isDisabled);
  };

  return (
    <div>
      <label>
        <input
          type="checkbox"
          checked={isChecked}
          onChange={handleCheckboxChange}
        />
        Enable/Disable Input
      </label>
      <input type="text" disabled={isDisabled} />
    </div>
  );
};

export default CheckboxInput;

在上述代码中，我们使用useState钩子来创建了两个状态变量isChecked和isDisabled，并分别初始化为false。isChecked用于跟踪复选框的选中状态，isDisabled用于跟踪输入字段的禁用状态。
handleCheckboxChange函数用于处理复选框的变化事件。当复选框被单击时，它会切换isChecked和isDisabled的状态。
在组件的返回部分，我们渲染了一个包含复选框和输入字段的<div>元素。复选框的checked属性绑定到isChecked状态变量，当复选框被单击时，会触发handleCheckboxChange函数。输入字段的disabled属性绑定到isDisabled状态变量，当isDisabled为true时，输入字段将被禁用。