ReduxForm - получение значения выбора из ввода выбора Semantic-UI

Я пытаюсь получить значение выпадающего меню с помощью Redux Form из компонента в React Semantic-UI. Я успешно получил значения из обычных текстовых входов, но не выбрал входы.

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

Всякий раз, когда я отправляю форму, она всегда возвращается как пустой объект, даже если я выбрал одно из раскрывающихся значений.


reactjs redux-form semantic-ui-react
person spjy    schedule 10.09.2017    source источник
comment
Удачи в решении этого еще?   -  person jonahe    schedule 10.09.2017

Ответы (1)


arrow_upward
1
arrow_downward

Я подозреваю, что вам, возможно, придется проделать еще немного ручной работы, чтобы компонент Select понял, что он должен делать с реквизитами формы Redux, которые вы ему передаете ( {...input}). Так что, например, вам, возможно, придется сделать некоторый "перевод" между onChange подпись Select и одна onChange подпись формы Redux.

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

Аналогичный процесс может потребоваться и для других свойств. И вы, конечно, также можете проверить с помощью таких инструментов, как Redux devtools (для Firefox или Chrome) чтобы увидеть, содержат ли действия, отправленные формой Redux, ожидаемые данные.

person jonahe    schedule 10.09.2017
comment
Я не совсем уверен, как получить значение семантического выбора пользовательского интерфейса, а затем передать эту информацию в reduxForm. - person spjy; 12.09.2017
comment
Если вы попробуете мой пример и поместите console.log(maybe, wrong, order, or, irrelevant) внутрь функции semanticSelectOnChange. Затем вы сможете увидеть, вызывается ли функция onChange вашего Select (из semantic-ui). Вы также сможете увидеть, КАК это вызывается (с каким количеством аргументов и т. д.). Первые два аргумента, вероятно, содержат значения, которые вы хотите отправить в Redux-Form, но вам, возможно, придется выбрать только соответствующие части. - person jonahe; 12.09.2017
comment
Если вы читали о функции onChange для поля Redux-Form, вы можете увидеть, какие значения она ожидает. Но будьте осторожны с (документацией)[redux-form.com /7.0.4/docs/api/field.md/], потому что вам нужно убедиться, что вы смотрите на ту же версию, что и та, которую вы используете. Если неизвестных слишком много, возможно, вам придется вернуться к основам. Сначала вам может понадобиться больше узнать о Redux Form (без семантического пользовательского интерфейса). - person jonahe; 12.09.2017
comment
Затем вы узнаете, как создать собственное очень простое настраиваемое поле, которое вы научитесь использовать с Redux Form. Тогда, возможно, вам нужно научиться использовать Semantic-ui сам по себе. (хотя бы простой пример). И тогда вы узнаете больше о том, как их все совместить. - person jonahe; 12.09.2017
comment
Ааа ладно, я получил значение выбора формы. Теперь я просто запутался в том, как передать это значение в избыточную форму. - person spjy; 14.09.2017
comment
Хороший. Хотя больше информации у меня пока нет. Если вы не поделитесь своими выводами, мне трудно помочь. Итак, вы получили значение в semanticSelectOnChange? В моем примере вы хотели бы использовать reduxFormOnChange сейчас. Что вы пробовали? И каков был результат? - person jonahe; 14.09.2017