我做了一個月份選擇器，如下圖所示。我洗掉了代碼，只留下提問的部分。第一次渲染月份選擇器時，沒有選擇的值，如果我選擇月份，值就出來了。我想在最初沒有選擇任何內容時回傳 false，并在選擇月份時回傳 true。所以我用console.log(pickMonth:檢查了這個值,pickMonth==="")，當它第一次渲染時，true出來了，如果有值則回傳false。所以我輸入console.log(了 pickMonth:,pickMonth===!"")因為我需要相反的值。但是不管有沒有值，它一直回傳false。怎么了？如果你讓我知道謝謝，我將不勝感激。
代碼：
import React, { useState } from 'react'
import styled from 'styled-components';
import Cake from '../resources/images/img/cake.png'
import DownArrow from '../resources/images/img/downarrow.png'
const BirthdayWrap = styled.div`
flex-direction: column;
display: flex;
position: relative;
z-index: 0;
`
function Birthday() {
const [pickMonth,setPickMonth] = useState('');
const handleSelectMonth = (e) => {
setPickMonth(e.target.value)
}
console.log(`pickMonth:`, pickMonth==='')
console.log(`pickMonth value:`, pickMonth)
return (
<BirthdayWrap isLoginGood={isLoginGood} pickMonth={pickMonth} pickDay={pickDay} pickYear={pickYear}>
<div>
<span>
<img alt='cake' src={Cake} />
</span>
<div>
<div>
<span>
<span>
<img alt='arrow' src={DownArrow} />
</span>
<select value={pickMonth} onChange={handleSelectMonth}>
<option className='monthOption' value="1">
Jan
</option>
<option className='monthOption' value="2">
Feb
</option>
<option className='monthOption' value="3">
March
</option>
</select>
</span>
<span>
<span>
<img alt='arrow' src={DownArrow} />
</span>
</span>
</div>
</div>
</div>
</BirthdayWrap>
)
}
export default Birthday;
uj5u.com熱心網友回復：
您應該只需要使用雙鍵pickMonth而不是比較運算子。空字串被推斷為錯誤的。
let pickMonth = ''
console.log(`pickMonth: `, !!pickMonth) // pickMonth: false
let pickMonth = 'foo'
console.log(`pickMonth: `, !!pickMonth) // pickMonth: true
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/527800.html
標籤：javascript反应