Question

我在下面说明了这种情况：

这与具有多个帐户的用户有关。这些帐户的表单字段以卡格式显示。因此，在“添加帐户”上，将显示一张额外的卡。在“删除”中，同一张卡会被删除

1）如果帐户已经存在，则所有帐户都应具有“删除帐户”，最后一个帐户应具有“保存并添加其他帐户”按钮

2）如果没有数据，则第一张卡应具有“保存并添加另一个帐户”，并且在添加该帐户之后，下一张卡应具有“保存并添加另一个帐户”，然后是“删除帐户”。另外，第一张卡只能使用“添加帐户”

我写了一个逻辑，没有涵盖上述所有情况。

我该如何即兴逻辑？

import * as React from "react";
import { render } from "react-dom";

export default class App extends React.Component<{}, IState> {
  addButtonClicked: boolean = false;

  constructor(props: any) {
    super(props);
    this.state = {
      accounts: [{ firstname: "", lastname: "", age: "" }]
    };
  }
  onAddAccount = (index: number) => {
    this.addButtonClicked = true;
    //adding accounts will be done here
  };

  renderAccounts = (accounts: Account[], removeButtonFlag: boolean) => {
    return accounts.map((value, index) => {
      return (
        <div key={index}>
          <div>
            <div>
              <h5>
                New Account{" "}
                {this.addButtonClicked && removeButtonFlag ? (
                  <span>{index + 1}</span>
                ) : (
                  ""
                )}
              </h5>
            </div>
          </div>
          <div>
            <form>
              <label>First Name:</label>
              <input
                type="text"
                name="firstname"
                value={value.firstname}
                onChange={e => this.handleChange(e, index)}
                required
              />
              <label>Last Name:</label>
              <input
                type="text"
                name="lastname"
                value={value.lastname}
                onChange={e => this.handleChange(e, index)}
              />
              <label>Age:</label>
              <input
                type="text"
                name="age"
                value={value.age}
                onChange={e => this.handleChange(e, index)}
                required
              />
              <div>
                {this.addButtonClicked && (removeButtonFlag && index === 0) ? (
                  ""
                ) : (
                  <button onClick={() => this.onAddAccount(index)}>
                    Save & Add Another Account{" "}
                  </button>
                )}
                {removeButtonFlag && index > 0 ? <span>|</span> : ""}
                {removeButtonFlag ? (
                  <button onClick={() => this.removeAccount(index)}>
                    Remove Account
                  </button>
                ) : (
                  ""
                )}
              </div>
            </form>
          </div>
        </div>
      );
    });
  };

  render() {
    const { accounts } = this.state;
    let removeButtonFlag: boolean = false;
    if (Object.keys(accounts).length > 1) {
      removeButtonFlag = true;
    }

    return <div>{this.renderAccounts(accounts, removeButtonFlag)}</div>;
  }
}

}

Answer 1

请考虑将解决方案分为components。卡组件将显示帐户信息以及添加/保存/删除按钮。道具可以是：

interface IAccountCardProps {
    firstname: string, 
    lastname: string, 
    age: string,
    AddAndSave: () => void | undefined,
    Remove: () => void | undefined,
    Add: () => void | undefined
}

<AccountCard/>组件将高于道具，并且如果AddAndSave不是undefined，则会显示“保存并添加另一个帐户”按钮。例如，第一张卡片将收到Add个回叫集（不是undefined），并显示“添加”按钮。

renderAccounts看起来像

renderAccounts = (accounts: Account[]) => {
    return accounts.length === 0 ? 
        // Return first 'default' account
        <AccountCard firstname={""}  lastname={""} age={""}
            AddAndSave={this.addAndSave.bind(this, 0)}
            Remove={undefined}
            Add={undefined}/> 
        :
        accounts.map((value, index) => {
            return <AccountCard {...value} 
                AddAndSave={accounts.length > 0 ? this.addAndSave.bind(this, index) : undefined}
                Remove={this.removeAccount.bind(this, index)}
                Add={index === 0 ? this.addAccount.bind(this, index) : undefined}/>
        })
}

所有在组件生命周期中更改的值都应放在state中。我说的是removeButtonFlag。
由于accounts是数组，因此该代码似乎无用。您可以更好地检查accounts.length
```
if (Object.keys(accounts).length > 1) {
    removeButtonFlag = true;
} 
```

根据条件显示/隐藏链接：React + Typescript

1 个答案: