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