У меня есть форма с тремя полями, а под полями - таблица его:
<Form name="accountEdit" onSubmit={handleSubmit(this.onSubmit)}>
<Form.Group widths="equal">
<Field name="label" label="Label" component={Form.Input} />
<Field name="address" label="Address" component={Form.Input} />
<Field name="active" label="Active" component={renderCheckbox} />
</Form.Group>
<Table celled striped>
<Table.Header>
<Table.Row>
<Table.HeaderCell colSpan="4">Owners</Table.HeaderCell>
<Table.HeaderCell colSpan="4" textAlign="center">
<Button
type="button"
icon="add"
onClick={this.onClickOwnerAdd}
/>
</Table.HeaderCell>
</Table.Row>
<Table.Row>
<Table.HeaderCell>User Name</Table.HeaderCell>
<Table.HeaderCell>First Name</Table.HeaderCell>
<Table.HeaderCell>Last Name</Table.HeaderCell>
<Table.HeaderCell>Email Address</Table.HeaderCell>
<Table.HeaderCell collapsing>Action</Table.HeaderCell>
</Table.Row>
</Table.Header>
<Table.Body>
{owners.map((owner, i) => {
return this.ownerRow(owner, i);
})}
</Table.Body>
</Table>
Когда вызывается this.onClickOwnerAdd (), в таблицу добавляется новый владелец.Но я бы хотел сохранить исходное состояние.У меня также есть кнопка «Сохранить» и «Отмена».При нажатии кнопки «Отмена» значение for должно вернуться к исходным значениям.Он отлично работает с полями ввода, но массив владельцев не вернется к исходным значениям.
Вот состояние формы перед добавлением владельца:
form: {…}
accountEdit: {…}
anyTouched: true
fields: Object { label: {…}, address: {…}, active: {…} }
initial: {…}
accountID: "70986b07"
active: false
address: "D4VQ5YdHf7hLQ2gWQYYrcxoE5B7nWuDFNF"
createdAt: "2019"
createdBy: "Damian Hischier"
label: "This is account 2"
owners: Array [ {…}, {…} ]
__proto__: Object { … }
registeredFields: Object { label: {…}, address: {…}, active: {…} }
submitSucceeded: true
values: {…}
accountID: "70986b07"
active: false
address: "D4VQ5YdHf7hLQ2gWQYYrcxoE5B7nWuDFNF"
createdAt: "2019"
createdBy: "Damian Hischier"
label: "This is account 2 Modified"
owners: Array [ {…}, {…} ]
__proto__: Object { … }
__proto__: Object { … }
__proto__: Object { … }
__proto__: Object { … }
После добавления владельца начальные значения также обновляются, но я хотел бы сохранить начальные значения, на случай, еслинажата кнопка «Отмена».
Вот состояние после добавления владельца:
form: {…}
accountEdit: {…}
anyTouched: true
fields: Object { label: {…}, address: {…}, active: {…} }
initial: {…}
accountID: "70986b07"
active: false
address: "D4VQ5YdHf7hLQ2gWQYYrcxoE5B7nWuDFNF"
createdAt: "2019"
createdBy: "Damian Hischier"
label: "This is account 2"
owners: Array [ {…}, {…}, {…} ]
__proto__: Object { … }
registeredFields: Object { label: {…}, address: {…}, active: {…} }
submitSucceeded: true
values: {…}
accountID: "70986b07"
active: false
address: "D4VQ5YdHf7hLQ2gWQYYrcxoE5B7nWuDFNF"
createdAt: "2019"
createdBy: "Damian Hischier"
label: "This is account 2 Modified"
owners: Array [ {…}, {…}, {…} ]
__proto__: Object { … }
__proto__: Object { … }
__proto__: Object { … }
__proto__: Object { … }
Моя цель состоит в том, чтобы иметь только двух владельцев с начальными и тремя значениями.Как я могу добиться этого?
Вот мои функции reduxForm () и connect ():
componentWillMount() {
console.log('componentDidMount');
this.props.initialize(Object.assign({}, this.props.account));
}
const AccountEditForm = reduxForm(
{
form: 'accountEdit',
fields: ['label', 'address', 'active', 'owners']
}
)(ConnectedAccountEdit);
const AccountEdit = withRouter(
compose(
connect(
mapStateToProps,
actions
)
)(AccountEditForm)
);
Можно ли сохранить значения в начальном состоянии в форме избыточного числа, если онине рассматриваются как поля?