как установить выбранное значение в состояние с помощью response-semantic-ui - PullRequest
0 голосов
/ 27 сентября 2019

Я пытался установить выбранное значение для состояния реакции, но в итоге получаю неопределенное значение.У меня есть два элемента ввода, ввод названия работает просто отлично, но я просто не могу понять, чего мне не хватает в элементе 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>
}

1 Ответ

0 голосов
/ 27 сентября 2019

Я бы предложил попробовать

...
const onSelectChange = (evt, data) => {
    console.log( data.value);
}
...
onChange={onSelectChange},
...
...