我正在尝试以初始值的形式传递。这样，我会得到警告，并且初始值未初始化。
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
通过将初始值传递给表单，我在做什么错了？
这是我使用的代码：
父组件：
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>
);
}
}
表单组件：
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)}</pre>
</div>
<div className="buttons">
<IconButton
className="btn btn-control-edit"
aria-label="save"
type="submit"
disabled={submitting}
// onClick={this.onEditField(id)}
>
<DoneIcon fontSize="small" />
</IconButton>
<IconButton
className="btn btn-control-edit"
aria-label="cancel"
onClick={form.reset}
onClick={() => cancel()}
>
<ClearIcon fontSize="small" />
</IconButton>
<IconButton
className="btn btn-control-edit"
aria-label="delet"
// onClick={this.onEditField(email.Id)}
>
<DeleteIcon fontSize="small" />
</IconButton>
</div>
</form>
)}
/>
</Styles>
);
操作系统：Windows 10
依赖性：
“最终形式”：“ ^ 4.10.0”，
“反应”：“ ^ 16.5.0”，
“ react-dom”：“ ^ 16.5.0”，
“ react-final-form”：“ ^ 3.6.7”，
答案 0 :(得分：0)
您必须为ur组件设置默认道具。
import React, { Component } from 'react';
AddressesList.defaultProps = {
isEditMode:true,
address :'Ahemedabad'
};
class AddressesList extends Component {
render() {
const { isEditMode, address } = this.props;
console.log('isEditMode, address',isEditMode, address);
return (<div>)
}
}