当前位置：首页 > React

react实现select联动

2026-01-26 23:27:32React

实现React中的Select联动

在React中实现Select联动通常涉及父子组件之间的状态管理。以下是一种常见的实现方式：

状态管理 使用React的useState钩子来管理各个Select的值。父组件维护所有Select的状态，子组件通过props接收当前值和选项。

const [firstSelectValue, setFirstSelectValue] = useState('');
const [secondSelectOptions, setSecondSelectOptions] = useState([]);
const [secondSelectValue, setSecondSelectValue] = useState('');

数据准备 准备联动数据，通常是一个对象或映射关系，表示第一个Select选项与第二个Select选项的对应关系。

const data = {
  option1: ['subOption1', 'subOption2'],
  option2: ['subOption3', 'subOption4']
};

处理第一个Select的变化 当第一个Select值变化时，更新第二个Select的选项并重置其值。

const handleFirstSelectChange = (e) => {
  const value = e.target.value;
  setFirstSelectValue(value);
  setSecondSelectOptions(data[value] || []);
  setSecondSelectValue('');
};

渲染Select组件 在组件中渲染两个Select元素，第二个Select的disabled状态取决于第一个Select是否有值。

react实现select联动

<select value={firstSelectValue} onChange={handleFirstSelectChange}>
  <option value="">请选择</option>
  {Object.keys(data).map((key) => (
    <option key={key} value={key}>{key}</option>
  ))}
</select>

<select 
  value={secondSelectValue} 
  onChange={(e) => setSecondSelectValue(e.target.value)}
  disabled={!firstSelectValue}
>
  <option value="">请选择</option>
  {secondSelectOptions.map((option) => (
    <option key={option} value={option}>{option}</option>
  ))}
</select>

使用Context实现复杂联动

对于更复杂的多级联动，可以考虑使用React Context来管理状态。

创建Context 创建一个Context来共享联动状态。

const SelectContext = createContext();

const SelectProvider = ({ children }) => {
  const [state, setState] = useState({
    firstSelect: '',
    secondSelect: '',
    options: {}
  });

  return (
    <SelectContext.Provider value={{ state, setState }}>
      {children}
    </SelectContext.Provider>
  );
};

消费Context 在子组件中使用useContext来获取和更新状态。

react实现select联动

const FirstSelect = () => {
  const { state, setState } = useContext(SelectContext);

  const handleChange = (e) => {
    setState({
      ...state,
      firstSelect: e.target.value,
      secondSelect: '',
      options: data[e.target.value] || []
    });
  };

  return (
    <select value={state.firstSelect} onChange={handleChange}>
      {/* 选项渲染 */}
    </select>
  );
};

使用自定义Hook封装逻辑

可以将联动逻辑封装成自定义Hook，提高代码复用性。

const useCascadeSelect = (initialData) => {
  const [values, setValues] = useState({
    first: '',
    second: ''
  });
  const [options, setOptions] = useState({
    second: []
  });

  const handleFirstChange = (value) => {
    setValues({
      first: value,
      second: ''
    });
    setOptions({
      second: initialData[value] || []
    });
  };

  const handleSecondChange = (value) => {
    setValues(prev => ({
      ...prev,
      second: value
    }));
  };

  return {
    values,
    options,
    handleFirstChange,
    handleSecondChange
  };
};

性能优化建议

对于大型数据集，考虑使用useMemo来优化选项的渲染性能。

const firstOptions = useMemo(() => {
  return Object.keys(data).map(key => (
    <option key={key} value={key}>{key}</option>
  ));
}, [data]);

const secondOptions = useMemo(() => {
  return secondSelectOptions.map(option => (
    <option key={option} value={option}>{option}</option>
  ));
}, [secondSelectOptions]);

表单集成

如果需要在表单中使用联动Select，可以结合表单库如Formik或React Hook Form。

const { register, watch, setValue } = useForm();

const firstSelectValue = watch('firstSelect');

useEffect(() => {
  setValue('secondSelect', '');
}, [firstSelectValue, setValue]);