Question

我已经开始从此样板创建应用程序。 https://github.com/Bikranshu/express-react-boilerplate

以下代码可以完美地将新记录保存到数据库中。我需要两个功能的帮助：

获取数据库值并将其作为默认值传递到表单字段
我想在其中添加更新记录功能。目前，此表单刚刚添加了新的记录功能。

这是容器的代码。

import React, {Component} from 'react';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';

import {USERS} from '../../constants/entity'
import * as crudAction from '../../actions/crudAction'

// Import custom components
import SignUpForm from '../../components/auth/SignUpForm';

class SignUpContainer extends Component {

    constructor(props) {
        super(props);

        this.submitForm = this.submitForm.bind(this);
    }

    /**
     * Submit the form.
     *
     * @param {object} formProps
     */
    submitForm(formProps) {

        this.props.actions.submitForm(USERS, formProps);
    }

    render() {

        return (
            <SignUpForm
                onSubmit={this.submitForm}
            />
        );
    }

}

/**
 * Map the actions to props.
 */
const mapDispatchToProps = dispatch => ({
    actions: bindActionCreators(Object.assign({}, crudAction), dispatch)
});

export default connect(null, mapDispatchToProps)(SignUpContainer)

这里是组件。

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {Link} from 'react-router-dom';
import {Field, reduxForm} from 'redux-form';
import {
    withStyles, 
    Divider,
    Paper,
    Typography,
    Grid,
    Button
} from '@material-ui/core';

// Import custom components
import renderText from '../common/form/renderText';

const styles = {
    root: {
        minWidth: 320,
        maxWidth: 400,
        height: 'auto',
        position: 'absolute',
        top: '15%',
        left: 0,
        right: 0,
        margin: 'auto'
    },
    card: {
        padding: 20,
        overflow: 'auto'
    },
    cardHeader: {
        textAlign: 'center'
    },
    btnDiv: {
        textAlign: 'center'
    },
    btn: {
        marginTop: 21,
    }
};

const AddClientForm = props => {
    
    const {handleSubmit, onSubmit, classes, userData} = props;

    return (
        <div>
            <form method="post" onSubmit={handleSubmit(onSubmit)}>
                <Paper style={{ padding: 16 }}>
                    <Typography variant="h4">Add Client</Typography>
                    <Grid container alignItems="flex-start" spacing={2}>
                        <Grid item sm={12} md={6} lg={4}>
                            <Field
                                type="text"
                                name="first_name"
                                component={renderText}
                                label="First Name"
                               
                            />
                        </Grid>
                        <Grid item sm={12} md={6} lg={4}>
                            <Field
                                type="text"
                                name="last_name"
                                component={renderText}
                                label="Last Name"
                                
                            />
                        </Grid>
                        <Grid item sm={12} md={6} lg={4}>
                            <Field
                                type="text"
                                name="email"
                                component={renderText}
                                label="Email"
                            />
                        </Grid>
                        <Grid item sm={12} md={6} lg={4}>
                            <Field
                                type="password"
                                name="password"
                                component={renderText}
                                label="Password"

                            />
                        </Grid>
                    </Grid>
                    <Grid container alignItems="flex-start" spacing={2}>
                        <Grid item sm={12} md={6} lg={4}>
                            <Button className={classes.btn} type="submit" variant="contained" color="primary">Create New Account</Button>
                        </Grid>
                    </Grid>
                </Paper>
            </form>
        </div>
    )
};

const validateSignUp = values => {
    const errors = {};

    const requiredFields = [
        'first_name',
        'last_name',
        'email',
        'password'
    ];
    requiredFields.forEach(field => {
        if (!values[field]) {
            errors[field] = '(The ' + field + ' field is required.)';
        }
    });

    if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) {
        errors.email = '(Invalid email address.)';
    }
    return errors
};

AddClientForm.propTypes = {
    onSubmit: PropTypes.func.isRequired,
    classes: PropTypes.object.isRequired
};

export default reduxForm({
    form: 'AddClientForm', // a unique identifier for this form
    validate: validateSignUp // ←Callback function for client-side validation
})(withStyles(styles)(AddClientForm))

请提供详细答复，因为该平台对我来说是新的。

谢谢。

将数据库值传递到Redux表单文件

0 个答案: