时间戳

首页 > 解决方案 > 尝试显示输入值，但控制台reactjs中没有任何错误显示

reactjs - 尝试显示输入值，但控制台reactjs中没有任何错误显示

问题描述

我试图从以下表单显示输入值，但没有出现，我所做的是：我编写了代码并修复了每个错误立即出现。我认为这将防止任何未来的问题，但它没有工作。它最终在控制台中没有任何错误+不显示输入值

我查看了多个网站，但没有一个对我有帮助

这是我的代码：

import * as React from "react";
import { useState } from "react";
import { useForm } from "react-hook-form";

function Users(props) {
  const [name, setName] = useState();
  const [username, setUsername] = useState();
  const [surname, setSurname] = useState();
  const [active, setActive] = useState();
  const [currentDepartment, setCurrentDepartment] = useState("");
  const { register, option } = useForm();
  const handleChange = (e) => {
    e.preventDefault();
    console.log(e);
  };
  function handleSubmit(e) {
    e.preventDefault();
    props.setData((prev) => prev.concat({ username, name, surname, active }));
  }

  let password = "MyPA55w()rd";
  let upper_count = 0;
  let lower_count = 0;
  let number_count = 0;
  let symbol_count = 0;
  for (let i = 0; i < password.length; i++) {
    let c = password.charAt(i);

    if ("A" <= c && c <= "Z") {
      upper_count += 1;
    } else if ("a" <= c && c <= "z") {
      lower_count += 1;
    } else if ("0" <= c && c <= "9") {
      number_count += 1;
    } else {
      symbol_count += 1;
    }
  }

  return (
    <form>
      User Name
      <input
        defaultValue={username}
        onChange={(e) => setUsername(e.target.value)}
        type="text"
        placeholder="username"
        name="username"
        ref={register}
      />
      <br />
      Name
      <input
        defaultValue={name}
        onChange={(e) => setName(e.target.value)}
        type="text"
        placeholder="name"
        name="name"
        ref={register}
      />
      <br />
      Surname
      <input
        defaultValue={surname}
        onChange={(e) => setSurname(e.target.value)}
        type="text"
        placeholder="surname"
        name="surname"
        ref={register}
      />
      <br />
      Choose Your Department
      <select defaultValue={currentDepartment}>
        <option value="N/A">Choose Your Department</option>
        <option value="1">Electrical Engineering</option>
        <option value="2">Mechanical Engineering</option>
        <option value="3">Chemical Engineering</option>
        <option value="4">Computer Sciense and Engineering</option>
      </select>
      <br />
      Password
      <input
        defaultValue="{password}"
        type="password"
        placeholder="password"
        name="password"
        ref={register({
          required: true,
          minLength: 8,
          maxLength: 16,
        })}
      />
      <br />
      Profile Picture
      <input type="file" />
      <br />
      Email
      <input type="email" placeholder="email" name="Email" ref={register} />
      <br />
      Day of Start
      <input
        type="date"
        placeholder="dateOfStart"
        name="date of start"
        ref={register}
      />
      <br />
      Birthday
      <input
        defaultValue="Birthday"
        type="date"
        placeholder="Birthday"
        name="Birthday"
        ref={register}
      />
      <br />
      is Active
      <input
        defaultValue={active}
        type="checkbox"
        onChange={(e) => setActive(e.target.value)}
      />
      <button onSubmit={handleSubmit}> Submit </button>
    </form>
  );
}

export default Users;

出现了一些错误，但我修复了所有错误，任何帮助将不胜感激。

标签： reactjs

解决方案

jour JSX 中不使用函数 handleChange，您必须将每个输入与其状态值绑定，如 value={stateInput} 并将事件 onChange 与函数 handleChange 绑定：

例子：

 const handleUserNameChange = (e) => {
    e.preventDefault();
    console.log(e.target.value); //username value
    setUsername(e.target.value);
};

    
  <input
    value={username}
    defaultValue={username}
    onChange={handleUserNameChange}
    type="text"
    placeholder="username"
    name="username"
    ref={register}
/>;

并对其他输入重复相同的操作。

推荐阅读