反應onChange方法在登錄表單中不起作用

我在嘗試使用 onChange 屬性將輸入值移動到組件狀態掛鉤時遇到了這個問題。我會很高興有你的幫助。

import React from 'react'
import { useState } from 'react';
import './userInterface.css';

function UserInterface() {

  const [userInfo, setUserInfo] = useState({
    isLoggedIn : '',
    userName : '',
    email : '',
    password : ''
  })


  let usenamePattern = /[A-Za-z0-9]{3,16}./ ;
  let emailPattern = /[A-Za-z0-9@.]{7,}/ ;
  
  
  const getInputToState = (e,inputField) => {
    
    
    
    switch(inputField){
      case 'username' : {
        setUserInfo(userInfo.userName = e.target.value) 
        console.log(userInfo)
        break
      }
      case 'email' : {
        setUserInfo(userInfo.email = e.target.value)
        console.log(userInfo)
        break
      }
      case 'password' : {
        setUserInfo(userInfo.password = e.target.value) 
        console.log(userInfo)
        break
      }
      default:
        return null
  
      }
      console.log(userInfo)

    
    
  }


  
  
  const alertForm = () => {


    if(userInfo.userName == '' && userInfo.email == '' && userInfo.password == ''){
      return{
        msg : '',
        color : 'green'
      }
    }
    
    else if(userInfo.userName.match(usenamePattern)){
      return {
        msg : 'You are allright !',
        color : 'limegreen'
      }
    }else if(!userInfo.userName.match(usenamePattern)){
      return {
        msg : 'Username should be more than 3 characters and less than 16, and contains only alphabets and numbers',
        color : 'red'
      }
    }

    
    
  }



  

  return (
    <div id='user-div'>
        <form id='user-form'>

            <h2 id="form-title">Tell us who you are :)</h2>

            <ul id="form-inputs">
              <li className="form-input">
                <input type="text" className="user-input" placeholder='Enter a username' maxLength={16} onChange={getInputToState()}/>          
              </li>
              <li className="form-input">
                <input type="text" className="user-input" placeholder='Enter your e-mail' onChange={getInputToState()}/>
              </li>
              <li className="form-input">
                <input type="text" className="user-input" placeholder='Create a password' onChange={(e) => {getInputToState()}}/>
              </li>
              <li className="form-input">
                <a><button className='action-form' id='submit-button' disabled>Submit</button></a>
              </li>
            </ul>

            <h4 id='alert-msg' style={{color : alertForm()?.color}}>{alertForm()?.msg}</h4>


            

            <h3 id='login-sign'>Already have an account ? <a href="/" id='login-form'>Log In</a></h3>
            
        </form>
    </div>
  )
}

export default UserInterface ;

這是整個組件代碼，它與道具或匯出無關。當我輸入輸入時，控制臺不回傳任何內容，這意味著該功能不起作用

uj5u.com熱心網友回復：

你應該做的第一件事是改變

onChange={(e) => {getInputToState()}}

至

onChange={(e) => {() => getInputToState( e, 'your_field_name' )}}

在你的getInputToState函式內部，你應該傳遞給帶有變異欄位或一個欄位的setUserInfo新物件。userInfo希望這會有所幫助。

您的函式應如下所示：

const getInputToState = (e, inputField) =>
{
  const newUserInfo = userInfo; // create new state object

  userInfo[inputField] = e.target.value; // Change th value

  setUserInfo(newUserInfo); // Set new state

};

您還可以擺脫 switch 陳述句。

uj5u.com熱心網友回復：

解決這個問題的最簡單方法是使用：

onChange={(e) => getInputToState(e, "username")}
onChange={(e) => getInputToState(e, "email")}
onChange={(e) => getInputToState(e, "password")}

switch 陳述句不會默認為 null 并給出所需的結果。

另請參閱此stackoverflow 問題。

標籤：javascript反应成分jsx

上一篇：如何使用狀態掛鉤更新陣列的各個元素？

下一篇：在更新useEffect中狀態的索引值時面臨問題