javascript - 使用 onClick 复制电子邮件表单

Question

我有一个表单，用户可以在其中将电子邮件地址输入到文本字段中，我需要一种存储此值的方法，然后当用户单击“添加另一封电子邮件”时，文本字段应该复制，但是我很难想出有任何想法。

  <Grid item xs={12} sm={6}>
    <TextField
      className={classes.field}
      id="contactEmails"
      name="contactEmails"
      label="Contact Email(s)"
      fullWidth
      autoComplete="lname"
      inputProps={{
        maxLength: 250
      }}
    />
  </Grid>
  <Grid item xs={12} sm={6}>
    <Button onClick={handleEmailClick} className={classes.addButton} variant='contained' color='primary'> Add Another Email</Button>
  </Grid>

Answer 1

您需要将所有电子邮件存储在一个数组

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      emails: [""]
    };
  }

  handleEmail() {
    this.setState({
      emails: [...this.state.emails, '']
    });
  }

  handleChange(e, i) {
    let { emails } = this.state;
    let emailUpdate = [...emails];
    emails.splice(i, 1);

    emailUpdate[i] = e.target.value;
    this.setState({
      emails: emailUpdate
    });
  }

  render() {
    let { emails } = this.state;
    return (
      <div>
        {emails.map((v, i) => {
          return (
            <div>
              <input value={v} onChange={e => this.handleChange(e, i)} />
              <br />
            </div>
          );
        })}
        <input
          type="button"
          value="Add Another Email"
          onClick={() => this.handleEmail()}
        />
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.0/umd/react-dom.production.min.js"></script>
<div id="root"></div>