Я пытался установить выбранное значение для состояния реакции, но в итоге получаю неопределенное значение.У меня есть два элемента ввода, ввод названия работает просто отлично, но я просто не могу понять, чего мне не хватает в элементе select семантического пользовательского интерфейса.
Вот код моего компонента:
const options = [
{ key: 'a', text: 'All', value: 'ALL' },
{ key: 'b', text: 'Branch', value: 'BRANCH' },
]
export function AddCategory({ eId }) {
const [title, setTitle] = useState('')
const [eligible, setEligible] = useState('')
return <Mutation mutation={ADD_CATEGORY}
refetchQueries={[{ query: CATEGORIES_QUERY, variables: { eId } }]}>
{(mutate, { loading, data, error }) => {
if (error) return <ErrorMessage message={error.message}/>
if (data) setTitle('')
return <Form
loading={loading}
onSubmit={(e) => {
e.preventDefault()
console.log('eligible', eligible) //undefined here
mutate({
variables: {
input: {
title,
eligible,
eId,
},
},
})
}}>
<Form.Group>
<Form.Input
name="title"
placeholder='Title'
onChange={e => setTitle(e.target.value)}
/>
<Form.Field
name="eligible"
control={Select}
options={options}
placeholder='Select Eligibility'
onChange={e => {
console.log('target', e.target.value) //undefined here
setEligible(e.target.value)
}}
/>
<Form.Button content='Add'/>
</Form.Group>
</Form>
}}
</Mutation>
}