Поля ввода «наследуют» значение из прошлых полей ввода при изменении состояния

avatar
Quique1222
8 августа 2021 в 20:29
26
1
0

У меня есть простой компонент с заголовком и двумя полями ввода

<h2>Login</h2>
<input type='text' id="login-username" placeholder="Username"></input>
<input type='password' id="login-password" placeholder="Password"></input>
<button className="btn btn-success" id="login-button">Login</button>

а затем у меня есть состояние, которое удаляет поле ввода (пароль) и добавляет еще одно

<h2>Login</h2>
<input type='text' id="login-username" placeholder="Username"></input>
<input type='password' id="login-code" placeholder="Code"></input>
<button className="btn btn-success" id="login-button">Login</button>
import '../css/Login.css';

import GenericWindow from "../components/GenericWindow";
import React, { useEffect, useRef } from "react";
import { store } from 'react-notifications-component';


class Login extends React.Component{
    constructor(props){
        super(props);
        document.title = "Login"
        this.state = {
            view:'login'
        }
    }

    render(){
        if (this.state.view == "login"){

            return(
                <GenericWindow>
                <h2>Login</h2>
               <input type='text' id="login-username" placeholder="Username"></input>
               <input type='password' id="login-password" placeholder="Password"></input>
               <a onClick={
                            () => {
                                this.setState({view:"login-code"})
                            }
                        }>Login with code</a>
               <button className="btn btn-success" id="login-button">Login</button>

            </GenericWindow>
        )
        }else{
            return(
                    <h2>Login</h2>
                    <input type='text' id="login-username" placeholder="Username"></input>
                    <input type='password' id="login-code" placeholder="Code"></input>
                    
                    <button className="btn btn-success" id="login-button">Login</button>
                    </GenericWindow>
                )
        }
    }
}


export default Login;

Я меняю состояния с помощью this.SetState, проблема в том, что когда я меняю состояние с первого на второе, если поле пароля имеет какое-либо содержимое, поле кода имеет его, когда я меняю состояние. В настоящее время я изучаю реакцию, поэтому я могу делать это совершенно неправильно, и состояния не подходят. В любом случае, как я могу предотвратить это поведение? Или, если я не должен использовать состояние для этого, что я должен использовать?

Источник
Kelvin Schoofs
8 августа 2021 в 20:45
0

Если вы не покажете код, мы не сможем обнаружить ошибки.

Ответы (1)

avatar
Bergi
8 августа 2021 в 21:23
0

Это ожидаемое поведение из-за алгоритма согласования React. Хотя вы думаете об этом как об удалении одного ввода и добавлении другого, React видит, что поле ввода все еще существует, только с измененными атрибутами id и placeholder. Он не размонтирует элемент и не монтирует новый — это просто изменение реквизита. Это отражено в DOM — React сохраняет тот же элемент ввода и изменяет только значения его атрибутов.

Чтобы избежать этого, вы можете дать им разные keys.