下面我在寫ReactJs代碼的時候，第一次使用if(this.state.username==true)，沒有得到預期的結果。但是當我使用if(this.state.username)它時，它可以按我的需要作業。因此，我可以明顯地看到if(x==true)和之間存在差異if(x)。我也知道有時，它們可能意味著相同并產生相同的結果。我的問題是，如果我的建構式設定如下，為什么這兩個運算式的行為會不同。這里的真正含義是if(this.state.username)什么？謝謝你幫我理解。
constructor(props){
super(props)
this.state = {username:""}
}
兩段代碼如下：
class MyForm extends React.Component {
constructor(props){
super(props)
this.state = {username:""}
}
changeName = (e) =>{
let target = e.target;
let name = target.name;
let value = target.value;
this.setState ({[name]: value});
}
render(){
let myHeader;
if(this.state.username==true){
myHeader = <h1>Hello {this.state.username}</h1>;
}else{
myHeader = "";
}
return (
<form>
{myHeader}
<h1>{this.state.username}</h1>
<p>Enter your name:</p>
<input
name='username'
type="text"
onChange = {this.changeName}
/>
</form>
);
}
}
ReactDOM.render(<MyForm />, document.getElementById('root'));<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<div id="root"></div>和
class MyForm extends React.Component {
constructor(props){
super(props)
this.state = {username:""}
}
changeName = (e) =>{
let target = e.target;
let name = target.name;
let value = target.value;
this.setState ({[name]: value});
}
render(){
let myHeader;
if(this.state.username){
myHeader = <h1>Hello {this.state.username}</h1>;
}else{
myHeader = "";
}
return (
<form>
{myHeader}
<h1>{this.state.username}</h1>
<p>Enter your name:</p>
<input
name='username'
type="text"
onChange = {this.changeName}
/>
</form>
);
}
}
ReactDOM.render(<MyForm />, document.getElementById('root'));<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<div id="root"></div>uj5u.com熱心網友回復：
if (expr)將被視為true如果expr是“truthy”。
'<str>' == truetrue如果<str>等于，將考慮運算式'1'。
在你的情況下，這樣做可能更有意義
if (this.state.username !== '') {
參考：
- https://tc39.es/ecma262/#sec-equality-operators
- https://tc39.es/ecma262/#sec-islooselyequal
uj5u.com熱心網友回復：
使用if(this.state.username==true)和之間有區別if(this.state.username)。使用前者比較this.state.usernamewith的值true，這當然是假的，除非它回傳一個字串值1，在這種情況下它會回傳true。
但是，執行后者會強制轉換this.state.username為 boolean 并檢查是否this.state.username有值（例如 not undefined）。
因此，如果您想使用if(this.state.username==true)，則必須this.state.username首先使用!!（或Boolean）強制轉換為布林值：
if(!!this.state.username==true) {
// your code goes here
}
uj5u.com熱心網友回復：
哈哈，太搞笑了。我已經嘗試過所有的真偽。讓我們看看結果：
console.log('Truthies:')
console.log('"a" == true returns:', "a" == true)
console.log('"1" == true returns:', "1" == true)
console.log('1 == true returns:', 1 == true)
console.log('3 == true returns:', 3 == true)
console.log('-1 == true returns:', -1 == true)
console.log('[] == true returns:', [] == true)
console.log('{} == true returns:', {} == true)
console.log('function a(){return true} == true returns:', function
a(){return true} == true)
console.log('"true" == true returns:', "true" == true)
console.log('')
console.log('Falsies:')
console.log('NaN == false returns:', NaN == false)
console.log('"" == false returns:', "" == false)
console.log('`` == false returns:', `` == false)
console.log('0 == false returns:', 0 == false)
console.log('undefined == false returns:', undefined == false)
console.log('null == false returns:', null == false)
console.log('')
console.log('Truthies not-equal false:')
console.log('"a" !== false returns:', "a" !== false)
console.log('1 !== false returns:', 1 !== false)
console.log('"1" !== false returns:', "1" !== false)
console.log('3 !== false returns:', 3 !== false)
console.log('-1 !== false returns:', -1 !== false)
console.log('[] !== false returns:', [] !== false)
console.log('{} !== false returns:', {} !== false)
console.log('function a(){return true} !== false returns:', function
a(){return true} !== false)
console.log('"true" !== false returns:', "true" !== false)
console.log('')
console.log('Truthies not-equal true:')
console.log('"a" !== true returns:', "a" !== true)
console.log('1 !== true returns:', 1 !== true)
console.log('"1" !== true returns:', "1" !== true)
console.log('3 !== true returns:', 3 !== true)
console.log('-1 !== true returns:', -1 !== true)
console.log('[] !== true returns:', [] !== true)
console.log('{} !== true returns:', {} !== true)
console.log('function a(){return true} !== true returns:', function
a(){return true} !== false)
console.log('"true" !== true returns:', "true" !== true)有一些棘手的事情。比如他們1 == true和1 !== true是true??。
無論如何......你最好使用!!以保持安全：
const { useState } = React
const MyForm = () => {
const [state, setState] = useState({ username: '' })
const handleChange = ({ target: { name, value } }) => {
setState({ [name]: value })
}
return (
<form>
{!!state.username && (
<h1>Hello {state.username}</h1>
)}
<p>Enter your name:</p>
<input
name="username"
type="text"
onChange={handleChange}
/>
</form>
)
}
ReactDOM.render(<MyForm />, document.getElementById('root'));<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<div id="root"></div>為了簡單起見，您可以使用鉤子、函式式組件、行內 jsx 運算子和解構。
uj5u.com熱心網友回復：
資料型別username不是布林值而是字串，字串驗證使用!== ''
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/389469.html
標籤：javascript html css 反应