如何获取和选择react js的值

Question

我使用的是antd，所以我有很多字段，有些是输入，选择，文件上传等，在antd输入组件有一个名称属性，但我无法看到antd选择组件的名称当我选择其中一个选项时得到'cannot destructure currentttarget of undefined'

这里是我的onChangeHandler

handleChange = ({ currentTarget: input }) => {
const errors = { ...this.state.errors }
const errorMessage = this.validateProperty(input)
if (errorMessage) errors[input.name] = errorMessage
else delete errors[input.name]
const data = { ...this.state.data }
data[input.name] = input.type === 'file' ? input.files[0] : input.value
this.setState({ data, errors })
}

如何在可重用的表单中使用select组件

renderSelect = (name, label, options) => {
const { data, errors } = this.state
return (
<Select
name={name}
label={label}
options={options}
value={data[name]}
error={errors[name]}
onChange={this.handleChange}
/>
)
}

这是我的antd选择组件

<Select name={name} size="medium" style={{ width: '350px' }} {...rest}>
<Select.Option />
{options.map((option) => (
<Select.Option key={option._id} value={option._id}>
{option.name || option}
</Select.Option>
))}
</Select>

Answer 1

您是否忘记了Option的label属性?

<Select.Option
label={option.name || option} 
key={option._id}
value={option._id}
>
{option.name || option}
</Select.Option>

关于handleChange，它是一个对象还是一个字符串?

Answer 2

您可以尝试添加这样的选项

<Select
defaultValue="lucy"
style={{ width: 120 }}
onChange={handleChange}
options={[
{ value: 'jack', label: 'Jack' },
{ value: 'lucy', label: 'Lucy' },
{ value: 'Yiminghe', label: 'yiminghe' },
{ value: 'disabled', label: 'Disabled', disabled: true },
]}
/>

而不是使用标签。也检查您的选项，以同时具有value和label属性。