[英]react-dates SingleDatePicker in redux-form v5
I am trying to use SingleDatePicker in redux-form.我正在尝试以 redux 形式使用 SingleDatePicker。 Here is the render method in my form
这是我表单中的渲染方法
render() {
const {fields: {date}, handleSubmit} = this.props;
return (
<form onSubmit={handleSubmit}>
<div>
<SingleDatePicker
{...date}
id="date_input"
selected={date.value ? moment(date.value, 'DD/MM/YYYY') : moment()}
onChange={param => date.onChange(param)} />
</div>
<button type="submit"><Link to="/Step1">Submit</Link></button>
</form>
);
}
and at the end of this form component并在此表单组件的末尾
export default reduxForm({
form: 'thisForm',
fields: ['date']})(thisForm);
what I got on the page is a static input like this我在页面上得到的是这样的静态输入
when I click it, nothing happened.当我点击它时,什么也没发生。 No highlight, no dropdown calendar like this .
没有突出显示,没有像这样的下拉日历。
Any idea?任何的想法? Any suggestion to handle datepicker like this in redux-form?
有什么建议可以以redux-form处理这样的datepicker吗?
Try creating a hidden field for redux-form and then wrapping the date selector so that it sets the hidden form field's value:尝试为 redux-form 创建一个隐藏字段,然后包装日期选择器,以便它设置隐藏表单字段的值:
// Wrap the Airbnb component so that it conforms to the property API expected by redux-form
// See: https://github.com/erikras/redux-form/issues/1860
// Also, see: https://github.com/airbnb/react-dates/blob/master/examples/SingleDatePickerWrapper.jsx
class DateField extends Component {
// The props are supplied via redux-form's <Field /> component
static propTypes = {
autoFocus: PropTypes.bool.isRequired,
input: PropTypes.shape({
value: PropTypes.string,
onChange: PropTypes.func.isRequired,
onFocus: PropTypes.func.isRequired,
onBlur: PropTypes.func.isRequired
}).isRequired
}
constructor (props) {
super(props)
const { value } = this.props.input
this.state = {
date: (!value || value === '') ? null : moment(value),
focused: this.props.autoFocus
}
}
// Use empty value instead of null to ensure it's treated as a controlled component
getValueAsString = date => (date ? date.toISOString() : '')
handleDateChange = (date, foo) => {
this.setState({ date }, () => {
const dateStr = this.getValueAsString(this.state.date)
this.props.input.onChange(dateStr)
})
}
handleFocusChange = (e) => {
this.setState({ focused: e.focused }, () => {
const date = this.state.date
const dateStr = this.getValueAsString(date)
if (e.focused) {
this.props.input.onFocus(dateStr)
} else {
this.props.input.onBlur(dateStr)
}
})
}
renderHiddenField = field => (
<input {...field.input} type={'hidden'} />
)
render () {
// eslint-disable-next-line
const { name, input, meta, ...rest } = this.props
const dateStr = this.getValueAsString(this.state.date)
return (
<div>
<Field
{...this.props}
name={`_hidden_${input.name}`}
value={dateStr}
component={this.renderHiddenField}
/>
<SingleDatePicker
id={`_wrapped_${input.name}`}
date={this.state.date}
focused={this.state.focused}
onDateChange={this.handleDateChange}
onFocusChange={this.handleFocusChange}
{...rest}
/>
</div>
)
}
}
try-> this.state.focused.focused尝试-> this.state.focused.focused
<SingleDatePicker
date={this.state.createdAt}
focused={this.state.calanderFocused.focused}
onDateChange={this.onDateChange}
onFocusChange={this.onFocusChange}
/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.