ReduxForm - getting select value from Semantic-UI select input

Question

I am trying to get the value of a dropdown menu using Redux Form from a component in React Semantic-UI. I have successfully received the values from normal text inputs, but not select inputs.

import React, { Component } from 'react';
import { Field, reduxForm } from 'redux-form';
import { Button, Header, Icon, Modal, Transition, Form, Input, Select, TextArea, Dropdown } from 'semantic-ui-react';
import '../../index.css';

const status = [
  { key: 'Online', text: 'Online', value: 'Online' },
  { key: 'Offline', text: 'Offline', value: 'Offline' },
];
class NewInfoForm extends Component {

  Status({ input, meta: {touched, error}, ...custom }) {
    console.log({...custom})
    return (
      <Form.Field control={Select} name="Status" label="Status" options={status} placeholder="Status" {...input} {...custom} />
    );
  }

  submit(values, dispatch) {
    console.log(values)
  }
  render() {
    const { handleSubmit } = this.props;
    return (
      <Transition animation="fade">
        <Modal trigger={<a className="cursor-pointer"> <Icon name="add" /> </a>} closeIcon>
          <Header content='New Info'/>
          <Modal.Content>
            <Form onSubmit={handleSubmit(this.submit.bind(this))}>
            <h3 className="ui dividing header">Basic Information</h3>
              <Form.Group>
                <Field name="Status" component={this.Status} />
              </Form.Group>
              <Button type="submit" content='Submit Info' icon='add' labelPosition='right' color="green" />
            </Form>
          </Modal.Content>
          <Modal.Actions>
          </Modal.Actions>
        </Modal>
      </Transition>
    );
  }
}

export default reduxForm({
  form: 'NewInfo'
})(NewInfoForm);

Whenever I submit the form, it always returns as an empty object even though I have chosen one of the dropdown values.

jonahe · Accepted Answer · 2017-09-10 10:27:11Z

1

I suspect you may need to do some more manual work to make the Select component understand what it should do with the Redux form props you pass to it ( {...input}). So for example, you might have to do some "translation" between the onChange signature of Select and the one onChange signature of Redux form.

  Status({ input, meta: {touched, error}, ...custom }) {
    const reduxFormOnChange = input.onChange;

    // the signature for this onChange is specific to
    // semantic-ui Select
    const semanticSelectOnChange = (maybe, wrong, order, or, irrelevant) => {
      // here we make the translation
      // so that the Redux form onChange gets
      // called correctly. 
      // (NOTE: this is an example, not actual code suggestion)
      reduxFormOnChange(or, maybe);
    };

    return (
      <Form.Field control={Select} 
        name="Status" label="Status" 
        options={status} placeholder="Status" 
        {...input} {...custom} 
        onChange={ semanticSelectOnChange } 
     />
    );
  }

A similar process may be needed for other properties as well. And you could of course also check with tools like Redux devtools (for Firefox or Chrome) to see if the actions dispatched by Redux form contain the data you would expect.

answered Sep 10, 2017 at 10:27

jonahe

5,0101 gold badge17 silver badges20 bronze badges

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

6 Comments

spjy Over a year ago

I am not quite sure how to get the value of the semantic ui select and then get that information to reduxForm.

jonahe Over a year ago

If you try my example and put console.log(maybe, wrong, order, or, irrelevant) inside of the semanticSelectOnChange function. Then you will be able to see IF the onChange function of your Select (from semantic-ui) is being called. You will also be able to see HOW it's being called (with how many arguments etc.). The first two arguments probably contain the values you want to send down to Redux-Form, but you may have to pick out just the relevant parts.

jonahe Over a year ago

If you read about the onChange function for a Redux-Form Field you can see what kind of values it expects. But be careful with (the documentation)[redux-form.com/7.0.4/docs/api/field.md/], because you need to see that you are looking at the same version as the one you are using. If there are too many unknowns, you may need to go back to basics. You may first need to understand more about Redux Form (without semantic-ui).

jonahe Over a year ago

Then you can learn about how make your own very simple custom field that you learn to use with Redux Form. Then maybe you need to learn to use Semantic-ui by itself. (at least a simple example). And then you will know more about how to combine them all.

spjy Over a year ago

Ahh okay, I got the value of the form select. Now I'm just confused on how to pass that value into redux form.

|

Collectives™ on Stack Overflow

ReduxForm - getting select value from Semantic-UI select input

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related