Form.Select value onChange Semantic UI React

Question

I need to get the value from Form.Select onChange, and also need it to persist from the value property.

Form

            <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 Store)

@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;
    }
}

Right now it always returns null. When returning just currentTarget it shows a div element and a inside. Perhaps this is causing the value to be undefined? What is the best way to capture / persist the value of Form.Select onChange?

It is kinda weird that updateInput is async and you also you try catch inside. Not quite understand why you need it. Anyway, did you try to use event.target.value instead? Or maybe try invoke event.persist() — Danila
– Danila, Commented Jun 24, 2020 at 20:08
I ended up stumbling across GitHub issue that helped. Should the method not be async?? — Parakoopa
– Parakoopa, Commented Jun 24, 2020 at 20:44
You are not using await inside so there is no reason to mark function as async or use try catch — Danila
– Danila, Commented Jun 24, 2020 at 21:11
Oh I thought I needed them for runInAction(), but after reading I do not. Thanks! — Parakoopa
– Parakoopa, Commented Jun 24, 2020 at 21:15

Parakoopa · Accepted Answer · 2020-06-24 20:48:31Z

3

I ended up stumbling across an issue on GitHub that helped me out. Just putting it here in case someone comes across the same issue.

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}
/>

Created another action in my store

@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;
    }
}

answered Jun 24, 2020 at 20:48

Parakoopa

5251 gold badge9 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Form.Select value onChange Semantic UI React

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related