Получение значения списка входов в реаги - PullRequest
Новая
       40

Получение значения списка входов в реаги

0 голосов
/ 30 октября 2019

У меня есть список входных тегов в моем приложении реакции. Я хочу получить значение всех входов, когда нажимаю кнопку подтверждения.

Я могу получить значение одного входа, но не могу получить все значения за один раз. 

keys.map(i => <Input fullWidth defaultValue={i} />)


<Button>Submit</Button>

получить список значений

1 Ответ

0 голосов
/ 30 октября 2019

Пример приложения для нескольких входов 

const App = () => {
  const [people, setPeople] = React.useState([
    { firstName: "Herry", lastName: "Sejal" },
    { firstName: "John", lastName: "Siri" },
    { firstName: "Bukky", lastName: "Sera" }
  ]);
  const [person, setPerson] = React.useState({ firstName: "", lastName: "" });
  const onChange = e => {
    setPerson({ ...person, [e.target.name]: e.target.value });
  };
  const onSubmit = e => {
    e.preventDefault();
    const newVal = [...people, person];
    setPeople(newVal);
    setPerson({ firstName: "", lastName: "" });
  };
  return (
    <div className="container">
      <div className="row">
        <div className="col">
          <h2>Add a person: </h2>
          <hr />
          <form onSubmit={onSubmit}>
            <div className="form-group">
              <input
                type="text"
                className="form-control"
                name="firstName"
                placeholder="First Name.."
                value={person.firstName}
                onChange={onChange}
              />
            </div>
            <div className="form-group">
              <input
                type="text"
                className="form-control"
                name="lastName"
                placeholder="Last Name.."
                value={person.lastName}
                onChange={onChange}
              />
            </div>
            <button className="btn btn-success" type="submit">
              Add person
            </button>
          </form>
        </div>
        <div className="col">
          <h2>People: </h2>
          <hr />
          {people.map(p => (
            <div key={Math.random() * 1000000000}>
              <p>
                {p.firstName} {p.lastName}
              </p>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};
...