我正在尝试将自定义输入传递给react-redux-form
控件组件,并使用标准输入中的值提交传递的新输入的值。
我有问题的代码示例here。
的DatePicker:
import React, { Component } from 'react';
import 'react-datepicker/dist/react-datepicker.css';
import DatePicker from 'react-datepicker';
import moment from 'moment';
class DatePickerInput extends Component {
constructor (props) {
super(props)
this.state = {
startDate: moment()
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(date) {
this.setState({
startDate: date
});
}
render() {
return (
<div>
<DatePicker
selected={this.state.startDate}
onChange={this.handleChange}
/>
</div>
);
}
}
export default DatePickerInput;
形式:
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Control, Form } from 'react-redux-form';
import ProgressIndicator from './ProgressIndicator';
import DatePickerInput from './DatePickerInput';
export default class SubmissionForm extends Component {
handleSubmit(values) {
console.log('value', values);
}
customInput(props) {
return (
<DatePickerInput {...props}/>
);
}
renderDatePicker(displayName, attributeName) {
const modelName = `newSubmission.${attributeName}`;
return (
<div>
<Control
model={modelName}
component={this.customInput}
/>
</div>
);
}
renderStep() {
return (
<Form
model="newSubmission"
onSubmit={(data) => this.handleSubmit(data)}
>
<div>
<Control.text
className="submission-form__field-input input"
model="newSubmission.name"
/>
</div>
{this.renderDatePicker('Start Date', 'startDate')}
<button
type="next"
>
submit
</button>
</Form>
);
}
render() {
return (
<div className="submission-form">
{this.renderStep()}
</div>
);
}
}
SubmissionForm.propTypes = {
handleSubmit: PropTypes.func
};
如果有人能看到缺少的东西,那将是一个很大的帮助。 传递“名称”,我可以在提交时在控制台中看到它,但是“开始日期”不是:(
答案 0 :(得分:1)
您的自定义组件中没有任何地方实际上发送值 - 它全部保持在内部组件状态。您需要确保发送更改后的值:
handleChange(date) {
this.setState({
startDate: date
});
this.props.onChange(date)
}