Reactjs 如何从另一个组件读取react钩子窗体中的值

我有以下表格基于：

功能应用程序{ 常数{ 登记 手推， 错误， 设置错误， 明确错误， formState:{isSubmitting} }=使用形式； const onSubmit=data=>{ alertJSON.stringifydata； }; 回来 种族渊源 ; } 导出默认应用程序； SelectOccidentity只是一个基于select的包装器组件，如下所示。我不得不这样做，因为它是非常长的选择与许多选项

export class SelectEthnicity extends Component {
    state = {

    };

    render() {
        return (
            <div>
                <select name="Selectethnicity">
                    <option value="">Select...</option>
                    <option value="white">White</option>
                    <option value="black">Black</option>
                    <option value="multiracial">Multiracial</option>
                    <option value="european">European</option>
                    <option value="poles">Poles</option>
                    <option value="bashkirs">Bashkirs</option>
                    <option value="slavs">Slavs</option>
                    <option value="russian">Russian</option>
                    <option value="romani">Romani</option>
                    <option value="chechens">Chechens</option>
                    // didn't add all long option. 

                </select>
            </div>
        )
    }
}

export default SelectEthnicity

从应用程序组件提交表单时，如何获取所选选项

根据，必须注册输入才能将其绑定到表单。我建议将表单传递给SelectOccidentity组件或仅传递register方法：

然后通过道具注册输入：

export class SelectEthnicity extends Component {
    ...
    render() {
        return (
            <div>
                <select name="Selectethnicity" ref={this.props.form.register({required: true})}>
                    <option value="">Select...</option>
                    // didn't add all long option. 
                </select>
            </div>
        )
    }
}

export default SelectEthnicity

---

在“提交”功能中，您现在应该具有所选值。

此外，如何使“选择民族”字段成为必填字段？因此，如果没有选择，我可以捕获错误。我建议您阅读文档。我搜索了几秒钟，找到了那个。您可以将验证逻辑传递给register方法：register{required:true}用于标准html字段，如textarea、input、select等。如果未选中，我可以添加并形成catch error。但对于我的组件，如果我添加。表单不在乎是否被选中。这就是我要问的。如何将此应用于SelectOmnicity？尝试将disabled和selected添加到您的第一个选项：Select…这不应该相关，但为什么SelectOmnicity是calss组件？我用一种新的方法重新创建了这个问题。我还调整了代码。ref是一个保留关键字，这就是我使用refProp向下传递寄存器的原因。

export class SelectEthnicity extends Component {
    ...
    render() {
        return (
            <div>
                <select name="Selectethnicity" ref={this.props.form.register({required: true})}>
                    <option value="">Select...</option>
                    // didn't add all long option. 
                </select>
            </div>
        )
    }
}

export default SelectEthnicity