我的 output 沒有顯示在瀏覽器控制台上

Question

我正在創建一個具有一些處理功能的表單。

這是我處理事件的函數。

const [name, setUsername] = useState("");
  const [age, setAge] = useState("");

  const handleNameChange = (event) => {
    setUsername(event.target.value);
  };
  const handleAgeChange = (event) => {
    setAge(event.target.value);
  };
  const submitFormHandler = (event) => {
    event.preventDefault();
    console.log(name,age);
  };

我使用帶樣式的組件來設置我的 Form 標簽的樣式。 從“styled-components”導入樣式；

const Forms = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  & label {
    font-weight: bold;
    margin: 15px;
  }

  & input {
    width: 40%;
    height: 20px;
    cursor: pointer;
  }

  & button {
    margin: 10px;
  }
`;

這是我的表格。

<Forms onSubmit={submitFormHandler}>
      <label htmlFor="username">Username</label>
      <input id="username" type="text" onChange={handleNameChange} />

      <label htmlFor="age">Age(Years)</label>
      <input id="age" type="number" onChange={handleAgeChange}/>

      <button type="submit">Add User</button>
</Forms>

我使用帶樣式的組件來設置<Form>標簽的樣式。 所以，我的問題是在單擊提交按鈕后，我在 onSubmit 事件處理程序 function 上出錯，其中用戶輸入的姓名和年齡未顯示在瀏覽器控制台上。

這是頁面

單擊提交按鈕后，值未顯示在瀏覽器控制台上

Answer 1

您的Forms組件是樣式化的<div> 。

只有<form>元素會發出提交事件。 改用這個...

const Forms = styled.form`
  etc
`;

您還缺少<input>元素中的value綁定

<input
  id="username"
  type="text"
  value={name}
  onChange={handleNameChange}
/>

<input
  id="age"
  type="number"
  value={age}
  onChange={handleAgeChange}
/>

請參閱受控組件