Блог

Главная - Вопросы по программированию - Как я могу проверить то же состояние при нажатии кнопки в React JS?

Как я могу проверить то же состояние при нажатии кнопки в React JS?

#javascript #reactjs

#javascript #reactjs

Вопрос:

 import React,{useState} from 'react';
const submitHandler =(e)=>{
    e.preventDefault()
    
}
function AdminPannel() {
    let defaultName = "rajeevkhadka";
    let defaultpassword = "nepalkoxro";
    const [username,setUsername] = useState();
    const [password,setPassword] = useState();
    return (
    <>  
        
        {username === defaultName amp;amp; password === defaultpassword? <div>
        Hey! I m the admin pannel <b>Rajeev Khadka</b>
        all the user are : 
        <ul>
            <li>Samrat Thapa (I need a website)</li>
            <li>Bikash Malla (I need to edit muy photo)</li>
        </ul>
    </div> :  <div>
        <form onSubmit={submitHandler}>
            <input type="text" value={username} onChange={e => setUsername(e.target.value)} />
            <input type="text" value={password} onChange={e => setPassword(e.target.value)}/>
            <input type="submit" onClick={handlePassword} value="Submit"/>
        </form>
    </div>}  
    </>
    )
}

export default AdminPannel;  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Здесь я проверяю, заполнено ли состояние, называемое username и password, defaultName и defaultpassword соответственно. если условие удовлетворяет, я хочу отобразить данные администратора, которые содержат ul и другие, которые я хочу отобразить в форме ввода..
Я сделал это, это работает, но мне нужно проверить то же самое при нажатии кнопки отправки.
я сталкиваюсь с проблемой, что, когда состояние заполнено правильными деталями, оно автоматически отображает часть ul…

Комментарии:

1. Создайте новое состояние для отслеживания отправки формы. Показывать форму до тех пор, пока она не будет отправлена.

Ответ №1:

 import React,{useState} from 'react';
function AdminPannel() { 
  const [isAdmin , setAdmin] = useState(false);
  const submitHandler =(e)=>{
      e.preventDefault()
      setAdmin(username === defaultName amp;amp; password === defaultpassword)
      
  }
    let defaultName = "rajeevkhadka";
    let defaultpassword = "nepalkoxro";
    const [username,setUsername] = useState();
    const [password,setPassword] = useState();
    return (
    <>  
         {isAdmin? <div>
        Hey! I m the admin pannel <b>Rajeev Khadka</b>
        all the user are : 
        <ul>
            <li>Samrat Thapa (I need a website)</li>
            <li>Bikash Malla (I need to edit muy photo)</li>
        </ul>
    </div> :  <div>
        <form onSubmit={submitHandler}>
            <input type="text" value={username} onChange={e => setUsername(e.target.value)} />
            <input type="text" value={password} onChange={e => setPassword(e.target.value)}/>
            <input type="submit"  value="Submit"/>
        </form>
    </div>}  
    </>
    );
}

export default AdminPannel;  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Ответ №2:

 import React,{useState} from 'react';
const submitHandler =(e)=>{
    e.preventDefault()
    
}

function AdminPannel() {
    let defaultName = "rajeevkhadka";
    let defaultpassword = "nepalkoxro";
    const [username,setUsername] = useState();
    const [password,setPassword] = useState();
    const [adminUL,setAdminUL] = useState(true);

    const handlePassword = () => {
    
        username === defaultName amp;amp; password === defaultpassword ? 
        setAdminUL (false) : setAdminUL(true);
    }

    return (
    <>  
        
        {!adminUL ? <div>
        Hey! I m the admin pannel <b>Rajeev Khadka</b>
        all the user are : 
        <ul>
            <li>Samrat Thapa (I need a website)</li>
            <li>Bikash Malla (I need to edit muy photo)</li>
        </ul>
    </div> :  <div>
        <form onSubmit={submitHandler}>
            <input type="text" value={username} onChange={e => setUsername(e.target.value)} />
            <input type="text" value={password} onChange={e => setPassword(e.target.value)}/>
            <input type="submit" onClick={handlePassword} value="Submit"/>
        </form>
    </div>}  
    </>
    )
}

export default AdminPannel;

Ответ №3:

 const [showAdminDetails, setShowAdminDetails] = useState(false);

  const handlePassword = () => {
      setShowAdminDetails(username === defaultName amp;amp; password === defaultpassword);
    }

Как показано выше, создайте локальный state для отслеживания видимости adminDetails . На основе этого создайте шаблон.

 **`Complete Code:-`**
function AdminPannel() {
    let defaultName = "rajeevkhadka";
    let defaultpassword = "nepalkoxro";
    const [username,setUsername] = useState();
    const [password,setPassword] = useState();
    const [showAdminDetails, setShowAdminDetails] = useState(false);

  const handlePassword = () => {
      setShowAdminDetails(username === defaultName amp;amp; password === defaultpassword);
    }

    return (
    <>  
        {showAdminDetails? <div>
        Hey! I m the admin pannel <b>Rajeev Khadka</b>
        all the user are : 
        <ul>
            <li>Samrat Thapa (I need a website)</li>
            <li>Bikash Malla (I need to edit muy photo)</li>
        </ul>
    </div> :  <div>
        <form onSubmit={submitHandler}>
            <input type="text" value={username} onChange={e => setUsername(e.target.value)} />
            <input type="text" value={password} onChange={e => setPassword(e.target.value)}/>
            <input type="submit" onClick={handlePassword} value="Submit"/>
        </form>
    </div>}  
    </>
    )
}

export default AdminPannel;