时间戳

首页 > 解决方案 > Form.Select 值 onChange Semantic UI React

reactjs - Form.Select 值 onChange Semantic UI React

问题描述

我需要从 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='Ian.Malcolm@JP.com' 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>

updateInput（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。当只返回 currentTarget 时，它会显示一个 div 元素和一个内部元素。也许这导致值未定义？捕获/保留 Form.Select onChange 值的最佳方法是什么？

标签： reactjssemantic-uimobx

解决方案

我最终在 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;
    }
}

推荐阅读