javascript Reactstrap的Redux表单字段渲染器

Posted 2021-05-04

// ....
<FormGroup>
    <Label for="author_id">Select Author</Label>
    <Field id="author_id" name="authorId" type="select" component={renderField}>
        <option value="">Select Author</option>
        {authors.map(author => (
            <option key={author.id} value={author.id}>
                {`${author.firstName} ${author.lastName}`}
            </option>
        ))}
    </Field>
</FormGroup>
// ....

import React, { Fragment } from 'react';
import PropTypes from 'prop-types';
import { Input, FormFeedback, FormText } from 'reactstrap';

export const renderTextField = ({ input, meta: { touched, error, warning }, ...custom }) => (
    <Fragment>
        <Input {...(touched ? { valid: !error } : {})} {...input} {...custom} />
        {error && <FormFeedback>{error}</FormFeedback>}
        {!error && warning && <FormText>{warning}</FormText>}
    </Fragment>
);

renderTextField.propTypes = {
    input: PropTypes.shape().isRequired,
    meta: PropTypes.shape().isRequired,
    type: PropTypes.string.isRequired
};

export const renderCheckbox = ({ input: { value, onChange } }) => (
    <Input type="checkbox" checked={!!value} onChange={onChange} />
);

renderCheckbox.propTypes = {
    input: PropTypes.shape().isRequired
};

export const renderSelectField = ({ input, meta: { touched, error }, children, ...custom }) => (
    <Input type="select" {...(touched ? { valid: !error } : {})} {...input} {...custom}>
        {children}
    </Input>
);

renderSelectField.propTypes = {
    input: PropTypes.shape().isRequired,
    meta: PropTypes.shape().isRequired,
    children: PropTypes.node.isRequired
};

export const renderRadioField = ({ value, input, ...custom }) => (
    <Input type="radio" checked={value === input.value} {...input} {...custom} />
);

renderRadioField.propTypes = {
    input: PropTypes.shape().isRequired,
    meta: PropTypes.shape().isRequired,
    value: PropTypes.string.isRequired
};

export const renderField = props => {
    switch (props.type) {
        case 'text':
        case 'textarea':
            return renderTextField(props);
        case 'select':
            return renderSelectField(props);
        case 'radio':
            return renderRadioField(props);
        case 'checkbox':
            return renderCheckbox(props);
        default:
            throw new TypeError('You need to provide simple type for Field component/');
    }
};