Question

我有一个包含三个字段的表单，在fileds下方是他的表格：

<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应当恢复为初始值。它在输入字段中可以正常工作，但是owners数组不会返回到初始值。

在添加所有者之前，这是表单状态：

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)
);

如果不将其视为字段，是否可以将值保存为redux-form的初始状态？

初始化不是保持初始状态的字段的值

0 个答案: