第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

在 ReactJS 中映射對(duì)象數(shù)組以創(chuàng)建登錄表單

在 ReactJS 中映射對(duì)象數(shù)組以創(chuàng)建登錄表單

慕妹3146593 2022-12-09 19:01:07
我目前正在嘗試在 ReactJS 中創(chuàng)建一個(gè)登錄表單(它沒(méi)有任何后端并且依賴于 Users.js 文件進(jìn)行輸入。我的 App.js 看起來(lái)像這樣:import React from 'react';import myUser from './User'import './App.css';class App extends React.Component{constructor(){super()this.state={userName:"",password:"",message:false} //myUser:[]this.eventHandler=this.eventHandler.bind(this)this.postDetails=this.postDetails.bind(this)}eventHandler(event){const {name,value}=event.targetthis.setState({[name]:value})}postDetails(event){ event.preventDefault()return(this.state.userName===myUser.name&&this.state.password===myUser.password? this.setState({message:true}):this.setState({message:false}))}render(){return(  <div className="main-div">    <h1>{this.state.message===true?"Success":"Try again"}</h1>    <form>           <input type="text" placeholder="enter name" name="userName"  onChange={this.eventHandler} />      <br />      <br />      <input type="password" placeholder="enter password" name="password"  onChange={this.eventHandler} />      <br />      <br/>      <button value="submit" onClick={this.postDetails}>Submit</button>    </form>       </div>)}}export default App;我的 User.js 看起來(lái)像這樣:const users ={id:1,name:"mahesh",password:"mahesh123"}export default users所以上面的代碼只檢查表單中輸入的用戶名和密碼字段是否與 User.js 對(duì)象數(shù)組中單條記錄的名稱和密碼匹配上面的代碼工作正常。但是如果我想制作一個(gè)對(duì)象數(shù)組怎么辦,假設(shè):const users =[{id:1,name:"mahesh",password:"mahesh123"},{id:2,name:"abc",password:"abc123"}]并想比較多個(gè)記錄?我必須使用映射嗎?請(qǐng)舉例說(shuō)明它是如何完成的。請(qǐng)幫忙,我是 React 的新手。我為格式道歉。
查看完整描述

2 回答

?
紅糖糍粑

TA貢獻(xiàn)1815條經(jīng)驗(yàn) 獲得超6個(gè)贊

習(xí)慣最常見(jiàn)的數(shù)組原型方法(如.some())將有助于解決這類問(wèn)題。


export const users = [

    { id: 0, name: 'user1', password: 'asd1' },

    { id: 0, name: 'user2', password: 'asd2' },

    { id: 0, name: 'user3', password: 'asd3' },

];

那么你postDetails需要看起來(lái)像這樣:


import { users } from '...';


// ...


postDetails() {

    const isUserValid = users.some(user => {

        const username = this.state.userName;

        const password = this.state.password;

        return user.name === username && user.password === password;

    });

    this.setState({ message: isUserValid });

};


查看完整回答
反對(duì) 回復(fù) 2022-12-09
?
滄海一幻覺(jué)

TA貢獻(xiàn)1824條經(jīng)驗(yàn) 獲得超5個(gè)贊

有一個(gè)功能,它首先嘗試找到一個(gè)用戶,然后如果我們找到具有相同名稱的對(duì)象,我們檢查密碼。如果某些內(nèi)容無(wú)效,則該函數(shù)返回 false,否則返回 true


const users =[

  {id:1,name:"mahesh",password:"mahesh123"},

  {id:2,name:"abc",password:"abc123"}

]


const validation = (login, password) => {

  const user = users.find(user => login === user.name) // find the user with same name

  if (typeof user !== 'undefined') { // check the user. If we didn't find a object with same name, user will be undefined 

    return user.password === password // if passwords match it returns true

  }

  return false

}


console.log(validation('mahesh', 'mahesh123'))

console.log(validation('abc', 'abc123'))

console.log(validation('abc', 'sffh'))

console.log(validation('abdsawec', 'abc123'))


查看完整回答
反對(duì) 回復(fù) 2022-12-09
  • 2 回答
  • 0 關(guān)注
  • 106 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)