Я пытаюсь передать в виде начальных значений.При этом я получаю предупреждение, и начальные значения не инициализируются.
index.js:1452 Warning: React does not recognize the `initialValues` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `initialvalues` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
in form (at AddressForm.js:48)
in ReactFinalForm (at AddressForm.js:27)
in div (created by Context.Consumer)
in StyledComponent (created by styled.div)
in AddressForm (at AddressesList.js:103)
in div (created by Context.Consumer)
in StyledComponent (created by styled.div)
in AddressesList (at ContactsDetailsModule.js:96)
in div (created by Context.Consumer)
in StyledComponent (created by styled.div)
in div (at LayoutDetailsContainer.js:28)
in div (created by Paper)
in Paper (created by WithStyles(Paper))
in WithStyles(Paper) (created by Context.Consumer)
in StyledComponent (created by Styled(WithStyles(Paper)))
in LayoutDetailsContainer (at ContactsDetailsModule.js:66)
in ContactsDetailsModule (at ClientContacts.js:94)
in div (at ClientContacts.js:93)
in div (created by Context.Consumer)
in StyledComponent (created by styled.div)
in div (at ClientPage.js:56)
in div (created by Context.Consumer)
in StyledComponent (created by styled.div)
in div (at LayoutPage.js:14)
in div (created by Context.Consumer)
in StyledComponent (created by styled.div)
in LayoutPage (at ClientPage.js:53)
in Client (created by Route)
in Route (created by withRouter(Client))
in withRouter(Client) (created by Connect(withRouter(Client)))
in Connect(withRouter(Client)) (at ClientContacts.js:82)
in ClientContacts (created by Route)
in Route (created by withRouter(ClientContacts))
in withRouter(ClientContacts) (created by Connect(withRouter(ClientContacts)))
in Connect(withRouter(ClientContacts)) (at PrivateRouter.js:10)
in Route (at PrivateRouter.js:6)
in PrivateRoute (at routes.js:22)
in Switch (at routes.js:15)
in Router (created by BrowserRouter)
in BrowserRouter (at routes.js:14)
in Routes (at App.js:17)
in div (at App.js:16)
in ThemeProvider (at App.js:15)
in MuiThemeProvider (at App.js:14)
in App (at src/index.js:36)
in Provider (at src/index.js:35)
function.console.(anonymous function) @ index.js:1452
warningWithoutStack @ react-dom.development.js:536
warning @ react-dom.development.js:2791
validateProperty$1 @ react-dom.development.js:7511
warnUnknownProperties @ react-dom.development.js:7554
validateProperties$2 @ react-dom.development.js:7577
validatePropertiesInDevelopment @ react-dom.development.js:7621
setInitialProperties @ react-dom.development.js:7885
finalizeInitialChildren @ react-dom.development.js:9038
completeWork @ react-dom.development.js:15063
completeUnitOfWork @ react-dom.development.js:17056
performUnitOfWork @ react-dom.development.js:17270
workLoop @ react-dom.development.js:17281
renderRoot @ react-dom.development.js:17359
performWorkOnRoot @ react-dom.development.js:18252
performWork @ react-dom.development.js:18159
performSyncWork @ react-dom.development.js:18132
interactiveUpdates$1 @ react-dom.development.js:18442
interactiveUpdates @ react-dom.development.js:2320
dispatchInteractiveEvent @ react-dom.development.js:5130
Что я делаю неправильно, передавая начальные значения в форму?
Вот код Iиспользуйте:
Родительский компонент:
class AddressesList extends Component {
state = {
isEditModeAddress: false,
};
onToggleEditMode = () => {
const { isEditModeAddress } = this.state;
this.setState({
isEditModeAddress: !isEditModeAddress,
});
};
onCancel = id => () => {};
onSubmit = values => {
console.log('values', values);
};
renderAddress = () => {
const { isEditModeAddress } = this.state;
const { isEditMode, address } = this.props;
console.log('address', address);
return (
<ListItem className="ListItem">
<ListItemIcon>
<LocationOnIcon className="icon" />
</ListItemIcon>
<div className="address-item">
<div className="address-street">
{address.HouseNum || ''} {address.Street || ''}
</div>
<div className="address-state">
{address.City || ''} {address.State || ''} {address.Zip || ''}
</div>
</div>
<ListItemSecondaryAction className="control">
{isEditMode &&
!isEditModeAddress && (
<IconButton
className="btn btn-edit"
aria-label="edit"
onClick={this.onToggleEditMode}
>
<EditIcon fontSize="small" />
</IconButton>
)}
</ListItemSecondaryAction>
</ListItem>
);
};
render() {
const { isEditModeAddress } = this.state;
const { isEditMode, address } = this.props;
const initialValues = {
houseNumber: 'test value',
street: 'test value',
unit: 'test value',
city: 'test value',
zip: 'test value',
};
return (
<Styles className="AddressesList" isEditMode={isEditMode}>
<ListHeader title="Addresses" />
{address && (
<List dense className="list">
{this.renderAddress()}
</List>
)}
{isEditModeAddress && (
<AddressForm
onSubmit={this.onSubmit}
initialValues={initialValues}
cancel={this.onToggleEditMode}
/>
)}
{!address && (
<Typography variant="subheading" className="no-data" gutterBottom>
Contact has no address
</Typography>
)}
</Styles>
);
}
}
Компонент формы:
<code>const AddressForm = ({ onSubmit, initialValues, cancel }) => (
<Styles>
<Form
onSubmit={onSubmit}
validate={values => {
const errors = {};
const isNumber = value => Number.isInteger(Number(value));
const onlyNumber = 'Must be an integer';
if (values.houseNumber && !isNumber(values.houseNumber)) {
errors.houseNumber = onlyNumber;
}
if (!values.street) {
errors.street = 'Required';
}
if (values.zip && !isNumber(values.zip)) {
errors.zip = onlyNumber;
}
return errors;
}}
render={({ handleSubmit, form, submitting, values }) => (
<form
onSubmit={handleSubmit}
initialValues={initialValues}
className="address-form"
>
<div className="fields">
<Field name="houseNumber">
{({ input, meta }) => (
<TextField
error={meta.error && meta.touched}
helperText={meta.touched ? meta.error : undefined}
label="House #"
{...input}
type="text"
placeholder="House Number"
className="field field-house-number dense"
margin="dense"
variant="outlined"
/>
)}
</Field>
<Field name="street">
{({ input, meta }) => (
<TextField
error={meta.error && meta.touched}
helperText={meta.touched ? meta.error : undefined}
label="Street"
{...input}
type="text"
placeholder="Street Name"
className="field field-street dense"
margin="dense"
variant="outlined"
/>
)}
</Field>
<Field name="unit">
{({ input, meta }) => (
<TextField
error={meta.error && meta.touched}
helperText={meta.touched ? meta.error : undefined}
label="Unit #"
{...input}
type="text"
placeholder="Unit #"
className="field field-house-unit dense"
margin="dense"
variant="outlined"
/>
)}
</Field>
<Field name="city">
{({ input, meta }) => (
<TextField
error={meta.error && meta.touched}
helperText={meta.touched ? meta.error : undefined}
label="City"
{...input}
type="text"
placeholder="City"
className="field dense"
margin="dense"
variant="outlined"
/>
)}
</Field>
<Field name="State">
{({ input, meta }) => (
<TextField
select
label="Select"
className="field dense"
value="State"
// onChange={this.handleNewChangeSelect}
SelectProps={{
MenuProps: {
className: 'select12345',
},
}}
margin="dense"
variant="outlined"
>
<MenuItem value="State">State</MenuItem>
</TextField>
)}
</Field>
<Field name="zip">
{({ input, meta }) => (
<TextField
error={meta.error && meta.touched}
helperText={meta.touched ? meta.error : undefined}
id="outlined-dense"
label="Zip Code"
{...input}
type="text"
placeholder="Zip Code"
className="field field-house-zip dense"
margin="dense"
variant="outlined"
/>
)}
</Field>
<pre>{JSON.stringify(values, 0, 2)} отмена ()}> )} /> );
ОС: Windows 10
зависимости:
"окончательная форма": "^ 4.10.0",
"реакция": "^ 16,5.0 ",
" реаги-дом ":" ^ 16.5.0 ",
" реакция-финальная форма ":" ^ 3.6.7 ",