react-widget DropdownList不会以Redux形式显示用户的选定选项

时间:2019-03-05 10:48:41

标签: reactjs drop-down-menu redux redux-form react-widgets

我正在使用redux-form创建具有下拉菜单和2个日期选择器的表单,然后使用axios的值来发出GET请求,并更新该表单下方显示的表格。我正在使用来自react-widgets的DropdownListDateTimePicker

GET请求正在运行,因此将捕获表单中的所有值,并且表中的数据将更新,但是我无法通过下拉菜单显示用户选择的选项。日期选择器确实显示用户选择的日期。

我已经做了很多研究,包括通过redux-form文档查看示例,基本的redux-form教程,并通过Google和Stack进行了大量搜索,但我没有发现任何有用的东西。这是我第一次使用redux和redux-form,所以我不确定我缺少什么。

SubmitForm.js组件的代码段如下。

感谢您的帮助

import { reduxForm, Field } from 'redux-form';
import Moment from 'moment';
import momentLocalizer from 'react-widgets-moment'
import DropdownList from 'react-widgets/lib/DropdownList';
import DateTimePicker from 'react-widgets/lib/DateTimePicker';
import 'react-widgets/dist/css/react-widgets.css';

Moment.locale('en');
momentLocalizer();

const renderDropdownList = ({ input, data, valueField, textField }) => {
  return <DropdownList {...input}
    data={data}
    valueField={valueField}
    textField={textField}
    onChange={input.onChange} />
}

const renderDateTimePicker = ({ input: { onChange, value }, showTime }) =>
    <DateTimePicker
      onChange={onChange}
      format="DD MMM YYYY"
      time={showTime}
      value={!value ? null : new Date(value)}
      />

class SubmitForm extends Component {

  displayName: 'SubmitForm';

  onSubmit(props) {
    this.props.fetch(props);
  }

  render() {
      const { handleSubmit } = this.props;
      const data = [];
      this.props.availableTypes.map(type => {
        return data.push({ type: type.item_name, value: type.item_name })
        })

      return (
        <form className="form-inline col-md-offset-2" onSubmit={handleSubmit(this.onSubmit.bind(this))}>
            <div className="form-group">
                <label htmlFor='item-type' className='mr-2'> Type:</label>
                <Field className='form-control' id='item-type'
                    name="type"
                    data={data}
                    valueField="valueField"
                    textField="type"
                    component={renderDropdownList}                  
                />

            <div className='verticalLine'></div>

            <div className="form-group">
                <label htmlFor="from" className="mr-2">From:</label>
                <Field
                name="from"
                showTime={false}
                component={renderDateTimePicker}
                />
            </div>

            <div className="form-group">
                <label htmlFor="to" className="mr-2 ml-2">To:</label>
                <Field
                name="to"
                showTime={false}
                component={renderDateTimePicker}
                />
            </div>

            <div className='verticalLine'></div>

            <div className='form-group'>
              <button type="submit" className="btn btn-secondary">Search</button>
              <div className='verticalLine'></div>
            </div>
            </div>
        </form >
      );
  };
};

SubmitForm = reduxForm({form: 'SubmitForm', validate})(SubmitForm);
export default connect(mapStateToProps, mapDispatchToProps)(SubmitForm);

0 个答案:

没有答案