我正在創建一個簡單的登錄/注冊表單作為反應。這個表單背后的想法是，在表單上方有兩個按鈕，一個是登錄，另一個是注冊。如果您點擊登錄，您就在登錄中。但是如果你點擊注冊，它會呈現注冊頁面。為了讓用戶看到他們當前的位置，在兩個按鈕下有一條線，當點擊按鈕時應該改變位置。這是反應和 css 代碼：
反應：
import React, { useState, useEffect } from 'react';
import '../styles/style.css';
const Login = () => {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [actMargin, setActMargin] = useState('0px');
const handleSubmit = (e) => {
e.preventDefault();
console.log('Submitted')
};
const changeHandlerL = () =>{
setActMargin('0px');
console.log(actMargin);
}
const changeHandlerS = () => {
setActMargin('77px');
console.log(actMargin);
}
return <form className='containerLogin' onSubmit={handleSubmit}>
<h1>Login</h1>
<div className="choose">
<button id="logS" onClick={changeHandlerL}>Login</button>
<button id="sigS" onClick={changeHandlerS}>Sign Up</button>
<div className="linea" style={{"margin-left":{actMargin}}}></div>
</div>
<p>Email:</p>
<input type="text" name="email" value={email} onChange={(e)=>setEmail(e.target.value)}/>
<p>Password:</p>
<input type="password" name="password" value={password} onChange={(e)=>setPassword(e.target.value)}/>
<button className="sign">Forgot Password?</button>
<button type="submit" id="sub" >Login</button>
<p>Don't have an account?<button className="sign">Sign up</button></p>
</form>
}
export default Login;
CSS：
@import url('https://fonts.googleapis.com/css2?family=Mochiy Pop P One&display=swap');
:root {
--black: #000000;
--white: #ffffff;
--dark-blue: #1a3491;
--night: #050f30;
--grey: #6b728c;
}
body{
background: linear-gradient(to left, var(--night), var(--dark-blue));
}
*:focus{
outline: none;
}
.containerLogin{
background:var(--white);
display: flex;
flex-direction:column;
letter-spacing:1px;
margin:auto;
padding: 30px;
text-align:center;
font-family: 'Mochiy Pop P One', sans-serif;
margin-top: 150px;
border: var(--white) solid 2px;
max-width: 450px;
border-bottom-left-radius: 30px;
border-top-right-radius: 30px;
}
.containerLogin h1{
margin-bottom: 50px;
}
.containerLogin .choose{
margin:auto;
display: flex;
flex-direction: row;
margin-bottom: 50px;
border-radius: 5px;
}
.containerLogin .choose button{
border: none;
background: var(--white);
}
.containerLogin p{
margin-bottom: 20px;
}
.containerLogin input, .containerLogin input:focus{
margin-bottom: 20px;
border: none;
border-bottom: 2px solid black;
font-size:12pt;
background: var(--white);
}
#sub{
margin: auto;
margin-top: 20px;
max-width: 100px;
background: var(--dark-blue);
color:var(--white);
padding: 8px;
border-radius: 10px;
border:none;
transition:1s;
}
#sub:hover{
background-color: var(--night);
}
.sign{
padding: 8px;
border-radius: 10px;
border:none;
background: var(--white);
color:var(--dark-blue);
transition: 1s;
}
.sign:hover{
background: var(--dark-blue);
color:var(--white);
}
#logS, #sigS{
border: none;
padding:10px;
}
.linea{
position:absolute;
width: 70px;
height: 6px;
margin-top: 40px;
background: var(--dark-blue);
border-radius: 2px;
transition:1s;
}
我創建的狀態應該跟蹤線的左邊距像素。在控制臺中，我可以看到狀態正在正確更改，但沒有任何更改。我想這是樣式語法的問題，正如我在其他一些帖子中所讀到的，但我無法修復它。有人能幫我嗎？謝謝
另一件事：我可以在 JSX 的樣式標簽中使用三元運算子嗎？例如：
<div style={{'background':{isMorning ? 'white': 'black'}}}>CIAO</div>
我問是因為它表明它在 VSCODE 上是不正確的。非常感謝
uj5u.com熱心網友回復：
css 和 div 更改將起作用，需要在邏輯上對其進行更多編輯
.noMargin {
margin-left: 0px
}
.hasMargin {
margin-left: 77px
}
<div className={actMargin==='0px' ? "noMargin" : "hasMargin" }></div>
你可以很好地改變邏輯 actMargin
uj5u.com熱心網友回復：
你能試試嗎
<div className="linea" style={{"margin-left":{actMargin}}}></div>
變成
<div className="linea" style={{marginLeft : actMargin }}></div>
語法好像不對
三元組也絕對是錯誤的，這就是 VS 代碼大喊錯誤的原因。
<div style={{'background':{isMorning ? 'white': 'black'}}}>CIAO</div>
應該
<div style={{'background': ( isMorning ? 'white': 'black' ) }}>CIAO</div>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/355953.html
標籤：javascript css 反应