ReactJS实现按钮禁用/启用及颜色切换功能求助

修改要点： #

1. 新增otherInput状态，追踪"Lainnya"选项对应的输入框内容，确保用户填写后按钮才启用
2. 编写按钮启用判断逻辑：选中有效选项，且选"Lainnya"时输入框不为空
3. 动态绑定按钮的disabled属性，同时根据状态切换样式类

修改后的完整代码 #

const ButtonModal = () => {
  const [openModal, setOpenModal] = useState(false);
  const [selectedOption, setSelectedOption] = useState(null);
  // 新增：追踪自定义输入框的值
  const [otherInput, setOtherInput] = useState("");

  const handleModal = () => setOpenModal(!openModal);

  // 计算按钮是否可用
  const isButtonEnabled = selectedOption !== null && (selectedOption !== "other" || otherInput.trim() !== "");

  return (
    <>
      <button
        onClick={handleModal}
        className="bg-merah text-white font-bold text-sm rounded-2xl w-48 h-10 py-2 mb-6"
      >
        Perbarui Kompetitor
      </button>
      <Modal
        center
        open={openModal}
        onClose={handleModal}
        showCloseIcon={false}
      >
        <section className="grid justify-items-end">
          <AiOutlineClose
            size={20}
            onClick={handleModal}
            className="cursor-pointer"
          />
        </section>
        <div className="flex items-center justify-center mb-4">
          <section className="inline-flex gap-2">
            <p className="font-bold text-center">Pembaruan Data Kompetitor</p>
          </section>
        </div>
        <p>
          Tambah data dengan memilih nama kompetitor yang tersedia atau masukkan
          data baru.
        </p>
        <p className="font-bold mt-6">Nama Kompetitor</p>
        <div className="flex justify-center">
          <div className="mb-3 w-600 mr-6 mt-2">
            <select
              onChange={(e) => setSelectedOption(e.target.value)}
              className="form-select appearance-none
      block
      w-full
      px-3
      py-1.5
      mb-1
      text-base
      font-normal
      text-gray-700
      bg-white bg-clip-padding bg-no-repeat
      border border-solid border-gray-300
      rounded
      transition
      ease-in-out
      m-0
      focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none"
              aria-label="Default select example"
            >
              <option value="">Pilih nama kompetitor</option>
              <option value="biznet">Biznet</option>
              <option value="cbn">CBN</option>
              <option value="first_media">First Media</option>
              <option value="iconet">Iconet</option>
              <option value="oxygen">Oxygen</option>
              <option value="my_republik">My Republik</option>
              <option value="other">Lainnya</option>
            </select>
          </div>
        </div>

        {selectedOption === "other" && (
          <div className="mb-6">
            <input
              className="w-[37.5rem] bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
              placeholder="Masukan nama kompetitor..."
              required
              value={otherInput}
              onChange={(e) => setOtherInput(e.target.value)}
            />
          </div>
        )}

        <div className="flex items-center justify-center">
          <button
            onClick={handleModal}
            type="button"
            className="inline-block px-6 py-2 border-2 border-red-600 text-red-600 font-medium text-xs leading-tight rounded hover:bg-black hover:bg-opacity-5 focus:outline-none focus:ring-0 transition duration-150 ease-in-out"
          >
            Kembali
          </button>
          
          <button
            type="button"
            className={`inline-block ml-6 px-6 py-2.5 font-medium text-xs leading-tight rounded shadow-md focus:outline-none focus:ring-0 transition duration-150 ease-in-out ${
              isButtonEnabled 
                ? 'bg-merah text-white hover:bg-red-700 hover:shadow-lg active:bg-red-800 active:shadow-lg' 
                : 'bg-gray-200 text-gray-700 hover:bg-gray-300 hover:shadow-lg focus:bg-gray-300 focus:shadow-lg active:bg-gray-400 active:shadow-lg'
            }`}
            disabled={!isButtonEnabled}
          >
            Lanjutkan
          </button>
        </div>
      </Modal>
    </>
  );
};

额外说明： #

• 统一把原代码里的class改成className，符合React语法规范
• 默认下拉选项设置空值value=""，确保初始状态下按钮保持禁用
• 按钮样式根据isButtonEnabled动态切换，启用时使用和主按钮一致的红色样式，禁用时保留原灰色样式

内容的提问来源于stack exchange，提问作者Kia Kalista