我的输出没有显示在浏览器控制台上

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

我使用带样式的组件来设置我的表单标签的样式。从“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 事件处理函数出现错误，用户输入的姓名和年龄未显示在浏览器控制台上。

This is the page

单击提交按钮后，浏览器控制台上未显示值

Answer 1

您的 Forms 组件是样式化的 <div>。

只有 <form> 个元素发出 submit event。改用这个...

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}
/>

见Controlled Components

我的输出没有显示在浏览器控制台上

my output is not displaying on the browser console

javascript

reactjs

styled-components

use-state