Сохранение значения и дублирование поля на клике - PullRequest
Новая
       18

Сохранение значения и дублирование поля на клике

2 голосов
/ 27 июня 2019

У меня есть поле, в которое пользователь может ввести свой адрес электронной почты, однако под этим полем у меня также есть кнопка с надписью «Добавить еще», я изо всех сил пытаюсь найти способ сохранить значение электронной почты и дать пользователю ввести другой электронная почта, я использую перехватчики React для этого процесса, например, я понимаю, что мне нужно будет хранить значение электронной почты внутри 

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>

Ответы [ 2 ]

3 голосов
/ 27 июня 2019

Вы не хотите иметь один с состоянием email, а скорее emails (массив писем): 

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

Чтобы затем добавить электронное письмо, возьмитепредыдущие электронные письма и добавьте одно: 

  setEmails([...emails, "new.email@example.com"]);

Замена электронного письма работает так же: 

  setEmails(emails.map(prev => prev === "previous@example.com" ? "new@example.com" : prev));

Теперь вы должны также обработать все эти электронные письма, для этого вы можете отобразить массивотправляет электронные письма в массив компонентов и возвращает их от вашего компонента: 

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

Возможно, вы захотите вместо этого взглянуть на useReducer, это будет гораздо элегантнее ...

1 голос
/ 27 июня 2019

Здесь у вас уже есть другая опция: 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);
...