在反应中获取输入列表的值答案

【问题标题】：Getting the value of list of inputs in react在反应中获取输入列表的值
【发布时间】：2019-10-30 05:44:46
【问题描述】：

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

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

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


<Button>Submit</Button>

获取值列表

【问题讨论】：

您的代码似乎有问题。但是，除非我们有code or information that can reproduce the problem，否则我们无能为力。否则，我们只是在盲目猜测。
请edit您的帖子包含您对问题的任何其他信息。避免在 cmets 中添加它，因为它们更难阅读并且更容易删除。帖子的编辑按钮就在帖子标签的下方。
@Anjali 你可以看看这个stackoverflow.com/a/58619381/6544460...我希望它能解决你的问题。

标签： reactjs list input getvalue

【解决方案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>
  );
};

【讨论】：