主页 / 问题 / 1265793
Accepted
Voprositel
Asked:2022-04-04 05:24:08 +0000 UTC2022-04-04 05:24:08 +0000 UTC

分页期间输入的奇怪行为

  • 772

出于某种原因，当切换到Регистрация第三个输入时，它“继承”value了之前的状态，也就是说，理论上它不应该有value，但它看起来还是等于Войти。怎么修？

import React, { useState } from 'react';

function Auth() {
    const [pagination, setPagination] = useState('log');

    function pag() {
        if (pagination === 'log') {
            return (
                <>
                    <input
                        type="text"
                        className="email"
                        placeholder="E-mail"
                    />
                    <input
                        type="text"
                        className="password"
                        placeholder="Пароль"
                    />
                    <input
                        type="button"
                        className="done"
                        value="Войти"
                    />                   // Отсюда передается
                </>
            );
        }

        return (
            <>
                <input
                    type="text"
                    className="email"
                    placeholder="E-mail"
                />
                <input
                    type="text"
                    className="password"
                    placeholder="Пароль"
                />
                <input
                    type="text"
                    className="password password-repeat"
                    placeholder="Повторите пароль"
                />                                          // Сюда
                <input
                    type="button"
                    className="done"
                    value="Зарегестрироваться"
                />
            </>
        );
    }

    function changePag(ev) {
        if (ev.target.dataset.type === 'log') {
            setPagination('log');
        } else {
            setPagination('reg');
        }
    }

    return (
        <div className="auth_page">
            <div className="pagination">
                <input
                    type="button"
                    className="log"
                    data-type="log"
                    onClick={changePag}
                    value="Вход"
                />
                <input
                    type="button"
                    className="reg"
                    data-type="reg"
                    onClick={changePag}
                    value="Регистрация"
                />
            </div>
            <div className="form">
                {pag()}
            </div>
        </div>
    );
}

export default Auth;
javascript

1 个回答

  1. Best Answer

    你可以放value=""，你仍然需要存储所有东西value并state改变整个事情：

    const [data, setData] = useState({
    auth: {
        login: "",
        password: ""
    }, 
    reg: {
        login: "",
        password: "",
        passwordR: ""
    }

})

    也值得调用输入 not {pag()}, but <Pag/>。像这样的东西，但这当然只是一个遥远的例子

        import React, { useEffect, useState } from 'react';

const AuthComponent = ({show, data}) => {
  const [showAuth, setShowAuth] = useState(false)
  useEffect(() => {
    setShowAuth(show)
  }, [show])
  return (
    <>
      {
      showAuth ? 
      <>
      <input
            type="text"
            className="email"
            placeholder="E-mail"
            value={data.auth.login}
        />
        <input
            type="text"
            className="password"
            placeholder="Пароль"
            value={data.auth.password}
        />
        <input
            type="button"
            className="done"
            value="Войти"
        />      
    </> : 

    <>
    <input
        type="text"
        className="email"
        placeholder="E-mail"
        value={data.reg.password}

    />
    <input
        type="text"
        className="password"
        placeholder="Пароль"
        value={data.reg.password}

    />
    <input
        type="text"
        className="password password-repeat"
        placeholder="Повторите пароль"
        value={data.reg.passwordR}

    />                                          
    <input
        type="button"
        className="done"
        value="Зарегестрироваться"
    />
</>
    }
    </> 
  )
}

function Auth() {
    const [pagination, setPagination] = useState(true);
    const [data, setData] = useState({
      auth: {
          login: "",
          password: ""
      }, 
      reg: {
          login: "",
          password: "",
          passwordR: ""
      }
  
  })
    function changePag(state) {
        setPagination(state)
    }

    return (
        <div className="auth_page">
            <div className="pagination">
                <input
                    type="button"
                    className="log"
                    data-type="log"
                    onClick={()=>changePag(false)}
                    value="Регистрация"
                />
                <input
                    type="button"
                    className="reg"
                    data-type="reg"
                    onClick={()=>changePag(true)}
                    value="Вход"
                />
            </div>
            <div className="form">
                <AuthComponent data={data} show={pagination}/>
            </div>
        </div>
    );
}

export default Auth;

    抱歉格式化

    • 2

相关问题