reactjs - 在反应中获取输入列表的值

Question

我的反应应用程序中有输入标签列表。单击提交按钮时，我想获取所有输入的值。

我可以得到一个输入的值，但不能一次得到所有的值。

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


<Button>Submit</Button>

获取值列表

标签： reactjslistinputgetvalue

Answer 1

多个输入的示例应用程序

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>
  );
};