存储一个价值并重复一个字段

Question

我有一个字段，用户可以在该字段中输入电子邮件地址，但是我在该字段下面也有一个按钮，上面写着'添加更多'电子邮件值并让用户输入另一封电子邮件，我正在为此过程使用React Hooks，例如，我知道我需要将电子邮件的值存储在A

中

const [email, setEmail] = useState=();

以下是我与问题有关的代码

<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 className={classes.addButton} variant='contained' color='primary'> Add Another Email</Button>
  </Grid>

Answer 1

您不想拥有一个一个状态的email，而不是emails(一系列电子邮件(：

  const [emails, setEmails] = useState([]);

然后添加一封电子邮件，获取以前的电子邮件，然后添加一封：

  setEmails([...emails, "[e-mail]"]);

更换电子邮件的工作方式相同：

  setEmails(emails.map(prev => prev === "[e-mail]" ? "[e-mail]" : prev));

现在您也必须渲染所有这些电子邮件，因为您可以将一系列电子邮件映射到组件中，然后从组件中返回：

   return emails.map(email => <p> {email} </p>);

您可能想看看useReducer，但是，这会更加优雅...

Answer 2

在这里您有另一个选项已经在工作：https：//jsfiddle.net/hpuey7zn/

说明：

• 在您存储当前input值(请参阅功能handleChange(和一个emails
的数组
• onClick按钮(如果不包括(将当前电子邮件添加到数组(请参阅handleClick(。

class App extends React.Component {
    state = {
        input: '',
        emails: []
    }
    handleChange = e => {
        this.setState({ input: e.target.value });
    }
    handleClick = ev => {
        ev.preventDefault();
        const { emails, input } = this.state;
            if (!emails.includes(input))
                this.setState({ emails: [...emails, input]});
    }
    render() {
        return (
            <div>
                <input
                    name="email" label="email" type="email"
                    onChange={ this.handleChange }
                />
                <button onClick={ev => { this.handleClick(ev)}}>
                    Add Another Email
                </button>
                <div>EMAILS:</div>
                <ul>{this.state.emails.map(email => <li>{email}</li>)}</ul>
            </div>
        )
    }
}
ReactDOM.render(<App />, document.getElementById("root"))

---

在这里您有一个带有钩子的版本：

import React, { useState } from "react";
import ReactDOM from "react-dom";
const App = () => {
  const [input, setInput] = useState('');
  const [emails, setEmails] = useState([]);
  return (
      <div>
          <input name="email" label="email" type="email"
              onChange={ ev => {setInput(ev.target.value)} }
          />
          <button onClick={ev => {
              if (!emails.includes(input)) setEmails([...emails, input])
          }}>
              Add Another Email
          </button>
          <div>EMAILS:</div>
          <ul>{emails.map(e => <li>{e}</li>)}</ul>
      </div>
  )
}
const rootElement = document.getElementById("root");
if (rootElement) ReactDOM.render(<App />, rootElement);