如何使用 react-semantic-ui 将选定值设置为状态

Question

我试图将值 selected 设置为响应状态，但我最终未定义。我有两个输入元素，标题输入工作正常，但我无法弄清楚语义 ui 的 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>
}

Answer 1

我建议试试

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

如何使用 react-semantic-ui 将选定值设置为状态

how to set selected value to state using react-semantic-ui

reactjs

react-select

semantic-ui-react