Question

当我使用 value 更改它并使用 onChange 和 value 创建姓名和联系电话时，我想获得 setContacts，此应用不会导致错误但不起作用，问题出在哪里？谢谢。

对象中的每个新联系人都有一个 id、一个 name 和一个 phone number

const AddUSer = () => {
  const {contacts, setcontacts}=useState([]);
  const { userName, setUSerName } = useState("");
  const { userPhone, setUserPhone } = useState("");
  const setName = (e) => {
    const value = e.target.value;
    return setUSerName(value);
  };
  const setPhone = (e) => {
    const value = e.target.value;
    return setUserPhone(value);
  };
  const handleNewcontact = () => {
    const allcontacts = [...contacts];
    const newContact = {
      id: Math.floor(Math.random() * 1000),
      fullName: userName,
      phone: userPhone,
    };
      allcontacts.push(newContact);
      setcontacts(allcontacts);
      setUSerName("");
      setUserPhone("");
    }
  };
  return (
    <div className="container">
      <form>
        <label>Name</label>
        <input className="form-control" onChange={(e) => setName} />
        <label>Phone</label>
        <input className="form-control" onChange={(e) => setPhone} />
        <button
          onClick={handleNewcontact}
          className="btn btn-primary mt-3 mb-4"
        >
          Save
        </button>
      </form>
    </div>
  );
};

export default AddUSer;

Answer 1

您没有将事件传递给函数。你可以这样做

onChange={(e) => setName(e)}
onChange={(e) => setPhone(e)}

但更好：

onChange={setName}
onChange={setPhone}

Answer 2

试试这个。当用户单击提交按钮时，这些值会得到安慰。

const AddUSer = () => {

const [contact, setContact] = useState({id: '', userName:'', userPhone:''});

  function handleNewContact(event) {
    setContact({
      ...contact, id: Math.floor(Math.random() * 1000),
      [event.target.name]: event.target.value
    });

  }

  function handleSubmit(event) {
    event.preventDefault();
    console.log(contact);
  }
  

  return (
    <div className="container">
      <form>

        <label>Name</label>
        <input className="form-control" name='userName' 
        onChange={handleNewContact} />

        <label>Phone</label>
        <input className="form-control" name='userPhone' 
         onChange={handleNewContact} />
        <button
          onClick={handleSubmit}
          className="btn btn-primary mt-3 mb-4"
        >
          Save
        </button>
      </form>
    </div>
  );
};

export default AddUSer;

使用钩子使用 onChange 设置状态

2 个答案: