Form.Select值onChange语义UI React

debugcn 发表于 Dev

帕拉科帕

我需要从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='[email protected]' 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值的最佳方法是什么？

帕拉科帕

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。