React中根据Dropdown(Select)选择结果启用/禁用TextField的问题

问题根源 #

你遇到的失效问题主要来自两个点：

1. react-select返回值类型错误：watch("purposes")拿到的是完整的选项对象（结构为{label: string, value: string}），不是单纯的value字符串，直接和"Others"字符串比较永远不成立，导致disabled判断完全失效。
2. TextField未正确绑定表单：之前的写法没有用Controller或register将TextField纳入react-hook-form的控制体系，导致setValue无法操作该输入框，表单提交时也无法收集它的值。

修复后的完整代码 #

import React, { useEffect } from "react";
import Select from "react-select";
import { useForm, Controller } from "react-hook-form";
import { Typography, Button, TextField } from "@mui/material";

const offices = [
  { label: "Building Management Office", value: "Building Management Office" },
  {
    label: "Information Technology and Resource Office",
    value: "Information Technology and Resource Office",
  },
  {
    label: "Engineering and Science Laboratory Office",
    value: "Engineering and Science Laboratory Office",
  },
];

const purposes = [
  {
    label: "Academic Purposes - Assignment & Activities",
    value: "Academic Purposes - Assignment & Activities",
  },
  { label: "Organization Purposes", value: "Organization Purposes" },
  {
    label: "Academic Purposes - Midterms & Finals",
    value: "Academic Purposes - Midterms & Finals",
  },
  { label: "Special Events", value: "Special Events" },
  { label: "Others", value: "Others" },
];

const teachers = [
  "Ms Roselle Wednesday Gardon",
  "Mr Jojo Castillo",
  "Mr John Patrick Lite",
  "Mr Patrick Star",
];

const Test_Form = () => {
  const { control, handleSubmit, setValue, watch } = useForm();

  // 获取选中的purpose选项对象
  const selectedPurpose = watch("purposes");

  // 切换purpose时清空specificPurpose输入框
  useEffect(() => {
    setValue("specificPurpose", "");
  }, [selectedPurpose, setValue]);

  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div className="borrowing-transaction">
        <Typography>Borrowing Information</Typography>
        <div className="office">
          <Typography>Office</Typography>
          <Controller
            name="offices"
            control={control}
            defaultValue=""
            render={({ field }) => <Select {...field} options={offices} />}
          />
        </div>

        <div className="purposes">
          <Typography>Purpose</Typography>
          <Controller
            name="purposes"
            control={control}
            defaultValue=""
            render={({ field }) => <Select {...field} options={purposes} />}
          />
        </div>

        <div className="specific-purpose">
          <Typography>Specific Purpose</Typography>
          {/* 用Controller绑定TextField，实现表单控制与状态切换 */}
          <Controller
            name="specificPurpose"
            control={control}
            defaultValue=""
            render={({ field }) => (
              <TextField
                {...field}
                label="Enter Specific Purpose"
                variant="filled"
                fullWidth
                style={{ backgroundColor: "white" }}
                // 选中Others时启用输入框，其余情况禁用
                disabled={selectedPurpose?.value !== "Others"}
              />
            )}
          />
        </div>
      </div>

      <Button type="submit" variant="contained" color="primary">
        Submit
      </Button>
    </form>
  );
};

export default Test_Form;

关键改动说明 #

• 修正disabled判断逻辑：使用selectedPurpose?.value !== "Others"，通过可选链?.避免初始状态selectedPurpose为空时的报错，同时正确读取选项的value值进行比较。
• 用Controller包裹TextField：将TextField纳入react-hook-form的管理范围，确保setValue能正常清空输入框，且表单提交时可正确收集该字段数据。
• 完善钩子依赖：添加setValue到useEffect的依赖数组中，消除React钩子依赖警告。

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