Laravel+InertiaJS+React中Select组件onChange不生效无法传值

Select值无法提交到后端是自定义组件和父表单状态完全脱节导致的，具体错误点：

• 自定义Select组件内部单独维护了languageChoice本地状态，选中下拉选项时仅更新内部状态，从未调用父组件传入的onChange回调，父组件中Inertia useForm托管的language字段始终停留在初始空值，提交请求自然不会携带该字段。
• 父组件向Select传入了value属性用于绑定表单值，但子组件未接收使用该prop做原生select标签的受控绑定，完全靠内部状态驱动选中逻辑，父子组件状态不同步，因此组件内打印传入value会显示undefined。
• option标签同时配置了defaultValue和受控value属性，违反React受控组件写法规则，会直接触发控制台报错。

附问题参考截图：

1. 改造自定义Select组件 #

删除组件内部冗余的本地状态，将组件改为标准受控组件，直接透传父组件传入的value、onChange属性到原生select标签：

import React from "react"

const Select = ({ label, name, value, onChange }) => {
    return (
        <div className="field-group">
            {label && <label htmlFor="customer-language">{label}</label>}
            <select
                name={name}
                id="customer-language"
                value={value}
                onChange={onChange}
            >
                <option value="en">English</option>
                <option value="es">Spanish</option>
            </select>
        </div>
    )
}

export default Select

原组件未接收渲染父组件传入的label属性，上述代码已补全该逻辑，不需要可直接删除对应label节点。

2. 父组件补全Select的value绑定 #

在父组件调用Select的位置，新增value属性绑定useForm托管的data.language字段，完成双向数据同步：

<Select
    label="Language"
    name="language"
    value={data.language}
    onChange={e => setData("language", e.target.value)}
/>

修改完成后，切换下拉选项时会直接触发setData更新Inertia表单内的language值，发起post提交时会自动将该字段随其他表单数据一同发送到后端，控制器即可正常获取到选中的语言值。

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