javascript - How do i get the value of text input field using react - Stack Overflow

admin管理员组

文章数量:1352018

I'm creating a register form in react with validation. The values i'm asking is Username, Email, password + (controll password). Everything about the form works, validations, Errors and if you click sign up you go to a new page. Now i want to extract the values to a my MySql database. I succeed in putting stuff in my database so the link works but i can't get the values of what i typed in the form.

I have tried

onChange={(e) => {
              setUsernameReg(e.target.value);
            }}
(see mented item)

But when i tried this I couldn't fill anything in Username. The code for the other inputs (email, password) is the same apart from the names.

So in short I want to get the value what you typed in a textbox to my database.

Code: FormSignup.js

  import React, { useEffect, useState } from 'react';
    import Axios from 'axios';
    import validate from './validateInfo';
    import useForm from './useForm';
    import './Form.css';
    
    const FormSignup = ({ submitForm }) => {
      const { handleChange, handleSubmit, values, errors } = useForm(
        submitForm,
        validate
      );
    
      const [usernameReg, setUsernameReg] = useState("");
      const [emailReg, setEmailReg] = useState("");
      const [passwordReg, setPasswordReg] = useState("");
    
      Axios.defaults.withCredentials = true;
    
      const register = () => {
        Axios.post("http://localhost:3001/register", {
          username: usernameReg,
          password: passwordReg,
          email: emailReg,
        }).then((response) => {
          console.log(response);
        });
      };
    
    
    
      return (
        
        <div className='form-content-right'>
          <form onSubmit={handleSubmit} className='form' noValidate>
            <h1>
              Get started with us today! Create your account by filling out the
              information below.
            </h1>
            <div className='form-inputs'>
              <label className='form-label'>Username</label>
              <input
                className='form-input'
                type='text'
                name='username'
                placeholder='Enter your username'
                value={values.username}
                onChange={handleChange}
                /*
                //onChange={(e) => {
                //  setUsernameReg(e.target.value);
                //}}
                */
              />
          

Code UseForm.js

  import { useState, useEffect } from 'react';
    import Axios from 'axios';
    
    
    const useForm = (callback, validate) => {
      const [values, setValues] = useState({
        username: '',
        email: '',
        password: '',
        password2: ''
      });
      const [errors, setErrors] = useState({});
      const [isSubmitting, setIsSubmitting] = useState(false);
    
      const [usernameReg, setUsernameReg] = useState("");
      const [emailReg, setEmailReg] = useState("");
      const [passwordReg, setPasswordReg] = useState("");
    
      Axios.defaults.withCredentials = true;
    
      const register = () => {
        Axios.post("http://localhost:3001/register", {
          username: usernameReg,
          password: passwordReg,
          email: emailReg,
        }).then((response) => {
          console.log(response);
        });
      };
    
    
      const handleChange = e => {
        const { name, value } = e.target;
        setValues({
          ...values,
          [name]: value
        });
      };
    
    
    
      const handleSubmit = e => {
        e.preventDefault();
    
        setErrors(validate(values));
        setIsSubmitting(true);
      };
    
      useEffect(
        () => {
          if (Object.keys(errors).length === 0 && isSubmitting) {
            callback();
          }
        },
        [errors]
      );
    
      return { handleChange, handleSubmit, values, errors };
    };

export default useForm; The code is from ;t and ;t

I'm creating a register form in react with validation. The values i'm asking is Username, Email, password + (controll password). Everything about the form works, validations, Errors and if you click sign up you go to a new page. Now i want to extract the values to a my MySql database. I succeed in putting stuff in my database so the link works but i can't get the values of what i typed in the form.

I have tried

onChange={(e) => {
              setUsernameReg(e.target.value);
            }}
(see mented item)

But when i tried this I couldn't fill anything in Username. The code for the other inputs (email, password) is the same apart from the names.

So in short I want to get the value what you typed in a textbox to my database.

Code: FormSignup.js

  import React, { useEffect, useState } from 'react';
    import Axios from 'axios';
    import validate from './validateInfo';
    import useForm from './useForm';
    import './Form.css';
    
    const FormSignup = ({ submitForm }) => {
      const { handleChange, handleSubmit, values, errors } = useForm(
        submitForm,
        validate
      );
    
      const [usernameReg, setUsernameReg] = useState("");
      const [emailReg, setEmailReg] = useState("");
      const [passwordReg, setPasswordReg] = useState("");
    
      Axios.defaults.withCredentials = true;
    
      const register = () => {
        Axios.post("http://localhost:3001/register", {
          username: usernameReg,
          password: passwordReg,
          email: emailReg,
        }).then((response) => {
          console.log(response);
        });
      };
    
    
    
      return (
        
        <div className='form-content-right'>
          <form onSubmit={handleSubmit} className='form' noValidate>
            <h1>
              Get started with us today! Create your account by filling out the
              information below.
            </h1>
            <div className='form-inputs'>
              <label className='form-label'>Username</label>
              <input
                className='form-input'
                type='text'
                name='username'
                placeholder='Enter your username'
                value={values.username}
                onChange={handleChange}
                /*
                //onChange={(e) => {
                //  setUsernameReg(e.target.value);
                //}}
                */
              />
          

Code UseForm.js

  import { useState, useEffect } from 'react';
    import Axios from 'axios';
    
    
    const useForm = (callback, validate) => {
      const [values, setValues] = useState({
        username: '',
        email: '',
        password: '',
        password2: ''
      });
      const [errors, setErrors] = useState({});
      const [isSubmitting, setIsSubmitting] = useState(false);
    
      const [usernameReg, setUsernameReg] = useState("");
      const [emailReg, setEmailReg] = useState("");
      const [passwordReg, setPasswordReg] = useState("");
    
      Axios.defaults.withCredentials = true;
    
      const register = () => {
        Axios.post("http://localhost:3001/register", {
          username: usernameReg,
          password: passwordReg,
          email: emailReg,
        }).then((response) => {
          console.log(response);
        });
      };
    
    
      const handleChange = e => {
        const { name, value } = e.target;
        setValues({
          ...values,
          [name]: value
        });
      };
    
    
    
      const handleSubmit = e => {
        e.preventDefault();
    
        setErrors(validate(values));
        setIsSubmitting(true);
      };
    
      useEffect(
        () => {
          if (Object.keys(errors).length === 0 && isSubmitting) {
            callback();
          }
        },
        [errors]
      );
    
      return { handleChange, handleSubmit, values, errors };
    };

export default useForm; The code is from https://www.youtube./watch?v=KGFG-yQD7Dw&t and https://www.youtube./watch?v=W-sZo6Gtx_E&t

• javascript
• mysql
• reactjs
• forms
• axios

Share Improve this question Follow asked Feb 14, 2021 at 22:25 user15208198user15208198

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

By using the value prop of the input, you turn it into a controled input element and thus need to update its value via a state variable. So this:

              <input
                className='form-input'
                type='text'
                name='username'
                placeholder='Enter your username'
                value={values.username}
                onChange={handleChange}
                /*
                //onChange={(e) => {
                //  setUsernameReg(e.target.value);
                //}}
                */
              />

Should just be this:

              <input
                className='form-input'
                type='text'
                name='username'
                placeholder='Enter your username'
                value={usernameReg}
                onChange={e => setUsernameReg(e.target.value)}             
              />

Note that this only answers this part:

I succeed in putting stuff in my database so the link works but i can't get the values of what i typed in the form

So this is how you can access those values. I can't guide you on how to get those values all the way to your DB as there is a longer distance they have to travel and I don't know what else could be in the way.

---

You should also look into useRef(), which will give you access to those input fields without updating your state on every change of the input and thus re-rendering your form over and over.

You can do something like this:

...
const regInput = React.useRef();
...

...

              <input
                ref={regInput}
                className='form-input'
                type='text'
                name='username'
                placeholder='Enter your username'

Then when you're ready to submit, just access the value of the username input like so:

...
const v = regInput.current.value;
...

本文标签： javascriptHow do i get the value of text input field using reactStack Overflow