Form.选择值更改语义 UI 反应

Question

我需要从 Form.Select onChange 中获取值，并且还需要它从 value 属性中持久化。

形式

<Form onSubmit={submitSSOLink}>
<Form.Group widths='equal'>
<Form.Input required={true} onChange={(e) => updateInput(e,"name")} fluid label='Name' placeholder='Gitlab' value={name} />
<Form.Input required={true} onChange={(e) => updateInput(e,"link")} fluid label='Link Url' placeholder='https://www.gitlab.com' type="url" value={link} />
</Form.Group>
<Form.Group>
<Form.Select
fluid
label='Category'
placeholder='Category'
options={options}
onChange={(e:any) => updateInput(e,"category")}
required={true}
value={category}
/>
</Form.Group>
<Form.Group widths='equal'>
<Form.Input required={true} onChange={(e) => updateInput(e, "owner")} fluid label='Owner' placeholder='Ian Malcolm'  value={owner} />
<Form.Input required={true} onChange={(e) => updateInput(e,"ownerEmail")} fluid label='Owner Email' placeholder='[e-mail]' type="email" value={ownerEmail} />
</Form.Group>
<Form.TextArea required={true} onChange={(e) => updateInput(e,"description")} fluid label='Description' placeholder='Fantastic resource' type="text" value={description} />
<Button type='submit'>Submit</Button>
</Form>

更新输入 (MOBX 商店(

@action updateInput = async (e:any, fieldName:string) => {
this.loadingStatus = true;
console.log(e.currentTarget)
try {
runInAction('updating field value', () => {
switch(fieldName) {
case "name":
this.name = e.currentTarget.value;
break;
case "link":
this.link = e.currentTarget.value;
break;
case "category":
this.category = e.currentTarget.value;
break;
case "owner":
this.owner = e.currentTarget.value;
break;
case "ownerEmail":
this.ownerEmail = e.currentTarget.value;
break;
case "description":
this.description = e.currentTarget.value;
break;
}
})
console.log(e.currentTarget.getAttribute('value'))
} catch (error) {
console.log(error);
this.loadingStatus = false;
}
}

现在它总是返回 null。当只返回当前目标时，它显示一个div 元素和一个内部。也许这导致值未定义？捕获/保留 Form 值的最佳方法是什么。选择"更改"？

Answer 1

我最终在 GitHub 上偶然发现了一个帮助我的问题。只是把它放在这里，以防有人遇到同样的问题。

https://github.com/Semantic-Org/Semantic-UI-React/issues/798

<Form.Select
fluid
label='Category'
placeholder='Category'
options={options}
onChange={(e:any, {value}) => updateCategory(e, value?.toString())}
required={true}
value={category}
/>

在我的商店中创建了另一个操作

@action updateCategory = async (e:any, value: string|undefined) => {
this.loadingStatus = true;
try {
runInAction('updating category', () => {
if (value != undefined) {
this.category = value;
}
console.log(value);
})
} catch (error) {
console.log(error)
this.loadingStatus = false;
}
}