如何使用useState将用户输入对象添加到React中的数组

Question

我试图解决将通过键盘输入的用户和电话号码添加到“人”数组中的问题，但是我不知道问题出在哪里。有人能帮我吗？非常感谢。

const PersonForm = () => {
  let input = this.props.input;
  console.log();
  return (
    <form onSubmit={e => this.props.handleSubmit(e)}>
      <div>
        Name:
        <input
          name="name"
          type="text"
          value={input.name}
          onChange={e => this.props.handleChange(e)}
        />
      </div>
      <div>
        Number:
        <input
          name="number"
          type="text"
          value={input.number}
          onChange={e => this.props.handleChange(e)}
        />
      </div>
      <div>
        <button type="submit">Add</button>
      </div>
    </form>
  );
};

const App = () => {
  const [persons, setPersons] = useState([]);
  const [input, setInput] = useState({
    name: "",
    number: ""
  });

  const addPerson = input => {
    setPersons([...persons, { name: input.name, number: input.number }]);
  };

  const handleChange = e => {
    setInput({
      ...input,
      [e.target.name]: e.target.value
    });
  };

  const handleSubmit = e => {
    e.preventDefault();
    addPerson(input);
  };

  return (
    <>
      <h1>Phonebook</h1>
      <h3>Add a new</h3>
      <PersonForm
        input={input}
        addPerson={addPerson}
        handleSubmit={handleSubmit}
        handleChange={handleChange}
      />
    </>
  );
};

也许我误解了useState。期待得到您的帮助。抱歉打扰。 链接：https://codesandbox.io/s/react-b7-controlled-form-phonebook-qz1pr

Answer 1

仅当在类组件内部而不是函数内部时，才可以使用import React, { useState } from "react"; import ReactDOM from "react-dom"; import "./styles.css"; const PersonForm = ({ handleSubmit, handleChange, input }) => { const { name, number } = input; console.log(); return ( <form onSubmit={handleSubmit}> <div> Name: <input name="name" type="text" value={name} onChange={handleChange} /> </div> <div> Number: <input name="number" type="text" value={number} onChange={handleChange} /> </div> <div> <button type="submit">Add</button> </div> </form> ); }; const App = () => { const [persons, setPersons] = useState([]); const [input, setInput] = useState({ name: "", number: "" }); const addPerson = input => { setPersons([...persons, { name: input.name, number: input.number }]); setInput({ name: "", number: "" }); }; const handleChange = e => { setInput({ ...input, [e.target.name]: e.target.value }); }; const handleSubmit = e => { e.preventDefault(); addPerson(input); }; console.log(persons); return ( <> <h1>Phonebook</h1> <h3>Add a new</h3> <PersonForm input={input} addPerson={addPerson} handleSubmit={handleSubmit} handleChange={handleChange} /> </> ); }; const rootElement = document.getElementById("root"); ReactDOM.render(<App />, rootElement); 。因此，您可以将它们作为参数进行访问。我所做的是，当您实际添加一个人时，应清除输入。

这是完整的代码：

{{1}}

Answer 2

您改进的代码。

const PersonForm = props => {
  console.log();
  return (
    <form onSubmit={props.handleSubmit}>
      <div>
        Name:
        <input
          name="name"
          type="text"
          value={props.input.name}
          onChange={props.handleChange}
        />
      </div>
      <div>
        Number:
        <input
          name="number"
          type="text"
          value={props.input.number}
          onChange={props.handleChange}
        />
      </div>
      <div>
        <button type="submit">Add</button>
      </div>
      <hr />
      {props.persons.map(p => (
        <p key={p.name}>
          {p.name}---{p.number}
        </p>
      ))}
    </form>
  );
};

const App = () => {
  const [persons, setPersons] = useState([]);
  const [input, setInput] = useState({
    name: "",
    number: ""
  });

  const addPerson = input => {
    setPersons([...persons, { name: input.name, number: input.number }]);
  };

  const handleChange = e => {
    setInput({
      ...input,
      [e.target.name]: e.target.value
    });
  };

  const handleSubmit = e => {
    e.preventDefault();
    addPerson(input);
  };

  return (
    <>
      <h1>Phonebook</h1>
      <h3>Add a new</h3>
      <PersonForm
        input={input}
        persons={persons}
        handleSubmit={handleSubmit}
        handleChange={handleChange}
      />
    </>
  );
};

Live demo