redux form example
import React from 'react';
import { Field, reduxForm } from 'redux-form';
import { connect } from 'react-redux';
import TextField from 'material-ui/TextField';
import FlatButton from 'material-ui/FlatButton';
import * as actions from '../../actions/itnItems.actions';
import './quotedPriceForm.css';
const renderTextField = ({ input, label, meta: { touched, error, warning }, ...custom }) => {
return (
<TextField
hintText={label}
floatingLabelText={label}
errorText={(touched && error) || (touched && warning)}
{...input}
{...custom}
/>
);
};
const validate = values => {
const errors = {};
const requiredFields = ['quotedPrice'];
requiredFields.forEach(field => {
if (!values[field]) {
errors[field] = 'Please enter a valid quoted price';
}
});
return errors;
};
// const warn = values => {
// const warnings = {};
// if (!Number(values.quotedPrice)) {
// warnings.quotedPrice = 'Please provide a valid price in numbers';
// }
// return warnings;
// };
const quotedPriceForm = props => {
const { item, handleSubmit, pristine, reset, submitting } = props;
const handleFormSubmit = formProps => {
const itemId = item.objectId;
const quotedPrice = formProps.quotedPrice;
return props.submitQuotedPrice(itemId, quotedPrice);
};
return (
<form className="quotedPrice-form" onSubmit={handleSubmit(handleFormSubmit.bind(this))}>
<div>
<Field name="quotedPrice" type="number" step="0.01" component={renderTextField} label="Quoted Price" />
</div>
<div>
<FlatButton type="submit" disabled={pristine || submitting}>
Submit
</FlatButton>
</div>
</form>
);
};
function mapStateToProps(state, ownProps) {
return {
initialValues: { quotedPrice: ownProps.item.quotedPrice }
};
}
const QuotedPrice = reduxForm({
form: 'quotedPriceForm', // a unique identifier for this form
enableReinitialize: true,
validate,
warn
})(quotedPriceForm);
export default connect(mapStateToProps, actions)(QuotedPrice);