简体   繁体   中英

How to bind custom (redux-form's Field) input prop to record?

I'm creating a Custom input through redux-form's Field. I use the "name" prop to match the record's attribute that I want to bind with but when I create or edit a record, the post params doesn't show the input value nor the attribute name.

I've tried the react-admin's tutorial on Custom inputs in several ways with no result.

Environment

React-admin version: 2.7.2 React version: 16.8.3 Browser: Chrome/Firefox

// tariff.js

import TextField from '@material-ui/core/TextField';
import { Field } from 'redux-form';

const renderTextField = ({ input, label, meta: { touched, error }, ...custom }) => {
    const { defvalue } = custom;

    return (
        <TextField
            label={label}
            error={!!(touched && error)}
            helperText={touched && error}
            {...input}
            {...custom}
            value={defvalue}
        />
    )
};

class Tariff extends React.Component {
    state = {
        tariffs: [],
        selectedTariff: {}
    }

    // other methods...

    render() {
        const { tariffs, selectedTariff } = this.state;

        return (
            <React.Fragment>
                <Autocomplete suggestions={tariffs}
                    label={'Elija una tarifa'}
                    onChange={this.onTariffSelected}
                    defaultValue={''} />
                <Field name="tariff" component={renderTextField} label="Tarifa" defvalue={selectedTariff.amount || 0} />
            </React.Fragment>
        )
    }
}

// Customer.js

export const CustomerCreate = (props) => (
    <Create title="Crear Alumno" {...props}>
        <SimpleForm defaultValue={{status: true, identification_type: 'DNI'}}>
            <TextInput label="Nombre" source="name" validate={required()} 
            <Tariff/>
        </SimpleForm>
    </Create>

Custom input prop "name" (via redux-form Field) to be added to the record on save or edit.

<Field name="tariff" defvalue={0}}/>

I expect on POST/PUT the record to have "tariff": 0 on his body.

SOLUTION:

Just connect the component that has the redux's Field to the redux store:

export default connect(null, null)(Tariff);

You should use initialValues in redux form. see here .

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM