reactjs - 如何在 ant design select 中输入“名称”html 属性？

Question

我有一个具有 ant design select 的组件和一个使用此 select 的表单组件，我正在尝试在 ant design select 中设置“名称”属性，但出现此错误

Ant design 选择组件

interface Props {
  name?: string;
  value?: string;

}
export const Select = ({ name, ...props }: Props) => {
  const { Option } = SelecteAntd;

     import {Select } from 'antd';
        
                   <Select
                      bordered={false}
                      {...props}
                      name={name}
                    >
                      <Option value="Youth">under 24</Option>
                      <Option value="Adult">25 - 64</Option>
                      <Option value="Senior">64+</Option>
            </Select>

表单组件

import { Select } from '../shared/Select';

                 <Select 
                        value={surveyData.age}
                        name='age' <------
                        onChange={handleChange}
                    />

标签： reactjstypescriptantd

Answer 1

我有一个解决方案，但它对我来说工作正常。

import React from "react";
import { useState } from "react";


const App =()=>{
  const [selectedState, setSelectedState] = useState(')

const handleInputChange =(selectedData,option)=>{
    console.log("[selected Data] ",selectedData);
    console.log("[selected option]",option);
   // setSelectedState(date.name)
  }
 // Note Please use antd select
return (<Select value={selectedState} onChange={handleChange}>
      <Option name="state" value="jack">Jack</Option>
      <Option name="state" value="lucy">Lucy</Option>
      <Option value="Yiminghe">yiminghe</Option>
    </Select>)    
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

对于动态数据

import { Select } from 'antd';
import React from 'react';
const { Option } = Select;

const DropdownComponent=({errMsg,optionList,...props})=>{
return <div>
   <Select   style={{ width: 120 }} {...props}>
 {optionList.map(({state,name})=>{
    return <Option name={props.name}  key={state} value=. 
 {state}>{name}</Option>
 })}
</Select>
{errMsg&&<p>{errMsg}</p>}
</div>;
};
export default DropdownComponent;