如何获取自定义React Select组件的选中值并传递到父组件使用？

你的原SelectName组件是内部闭环的独立组件，没有接收和处理父组件传入的value、onChange属性，内部的选中事件也没有同步到父组件，所以父组件传入的参数不会生效，自然无法拿到选中值。

1. 改造SelectName为支持受控调用的组件 #

删除组件内部独立的value状态，直接使用父组件传入的value和onChange绑定到选择框上：

const SelectName = ({ value, onChange }) => {
  const [names, setNames] = useState([]);
  useEffect(() => {
    const unsubscribe = firestore
      .collection("name")
      .onSnapshot((snapshot) => {
        const arr = [];
        snapshot.forEach((doc) =>
          arr.push({
            ...doc.data(),
            id: doc.id,
          })
        );
        setNames(arr);
      });

    return () => {
      unsubscribe();
    };
  }, []);

  return (
    <div>
      <FormControl fullWidth>
        <InputLabel htmlFor="names">Names</InputLabel>
        {/* 绑定父组件传入的value和change事件 */}
        <Select value={value} onChange={onChange} fullWidth>
          {names &&
            names.map((user) => {
              const fullName = user.firstName + " " + user.lastName
              return (
                <MenuItem
                  key={fullName}
                  value={fullName}
                >
                  {fullName}
                </MenuItem>
              )
            })}
        </Select>
      </FormControl>
    </div>
  );
};

export default SelectName;

2. 父组件声明两个独立状态存储两个选择框的值 #

因为两个选择框的值相互独立，需要分别声明状态绑定：

// 分别声明两个状态存储两个选择框的值
const [firstSelectedName, setFirstSelectedName] = useState("");
const [secondSelectedName, setSecondSelectedName] = useState("");

// 可直接打印两个选中值
console.log("第一个选择框值：", firstSelectedName);
console.log("第二个选择框值：", secondSelectedName);

const handleSubmit = (e) => {
  e.preventDefault()
  // 提交时可直接获取两个值使用
  console.log("提交的两个姓名：", firstSelectedName, secondSelectedName)
}

return (
  <form onSubmit={handleSubmit}>
    {/* 其他表单项 */}
    <Grid item>
      {/* 第一个姓名选择框 */}
      <SelectName
        value={firstSelectedName}
        onChange={(e) => setFirstSelectedName(e.target.value)}
      />
    </Grid>
    <Grid item>
      {/* 第二个姓名选择框 */}
      <SelectName
        value={secondSelectedName}
        onChange={(e) => setSecondSelectedName(e.target.value)}
      />
    </Grid>
    <ButtonForm type="submit" fullWidth>
      Submit
    </ButtonForm>
  </form>
)

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