Reactjs 如何使用react语义ui将选定值设置为状态
我试图将选择的值设置为反应状态,但最终未定义。我有两个输入元素,title输入工作得很好,但我无法找出semantic ui的select元素缺少了什么 以下是我的组件代码:Reactjs 如何使用react语义ui将选定值设置为状态,reactjs,react-select,semantic-ui-react,Reactjs,React Select,Semantic Ui React,我试图将选择的值设置为反应状态,但最终未定义。我有两个输入元素,title输入工作得很好,但我无法找出semantic ui的select元素缺少了什么 以下是我的组件代码: const options = [ { key: 'a', text: 'All', value: 'ALL' }, { key: 'b', text: 'Branch', value: 'BRANCH' }, ] export function AddCategory({ eId }) { const [t
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>
}
const选项=[
{键:'a',文本:'All',值:'All'},
{键:'b',文本:'Branch',值:'Branch'},
]
导出函数AddCategory({eId}){
const[title,setTitle]=useState(“”)
const[qualified,setqualified]=useState(“”)
返回
{(mutate,{加载,数据,错误})=>{
如果(错误)返回
如果(数据)设置标题(“”)
返回{
e、 预防默认值()
console.log('qualified',qualified)//此处未定义
变异({
变量:{
输入:{
标题
合格的,
开斋节,
},
},
})
}}>
setTitle(e.target.value)}
/>
{
console.log('target',e.target.value)//此处未定义
SetQualified(如目标值)
}}
/>
}}
}
我建议试试
。。。
const onSelectChange=(evt,数据)=>{
console.log(data.value);
}
...
onChange={onSelectChange},
...
我知道在基于类的组件中使用这种方法,但不知道在基于函数的状态挂钩中使用这种方法,但我会尝试一下。