Сложные состояния в React

Это расширенная версия состояния, мы использовали единственное состояние в React. А теперь мы будем использовать множественное состояние в нашем веб-приложении. Мы попытаемся изучить несколько состояний, разработав приложение для голосования.

import React from 'react';
import {useState} from 'react';
export const App = () => {
  const [candidate1, setCandidate1] = useState(0)
  const [candidate2, setCandidate2] = useState(0)
  const [candidate3, setCandidate3] = useState(0)
return (
    <div>
      {candidate1}
      <button onClick={() => setCandidate1(candidate1 + 1)}>
        Ramesh
      </button>
      <hr/>
      {candidate2}
       <button onClick={() => setCandidate2(candidate2 + 1)}>
        Umesh
      </button>
      <hr/>
      {candidate3}
       <button onClick={() => setCandidate3(candidate3 + 1)}>
        Suresh
      </button>
    </div>
  )
}

Создайте новый проект реакции, используя npx, и замените файл App.js на этот. Какова наша повестка дня, давайте обсудим. В комитете 30 членов. Они хотят выбрать одного члена в качестве руководителя комитета. Итак, они организовали выборы, и тот, кто наберет наибольшее количество голосов, станет руководителем комитета.

Иметь ввиду-

1-3 участника участвуют в выборах .

2- Всего 30 членов, включая участников.

import React from 'react';
import { useState } from 'react';
export const App = () => {
    const [candidate1, setCandidate1] = useState(0)
    const [candidate2, setCandidate2] = useState(0)
    const [candidate3, setCandidate3] = useState(0)
    const [count, setCount] = useState(0)
    const handleone = () => {
        setCandidate1(candidate1 + 1)
        setCount(count + 1)
    }
    const handletwo = () => {
        setCandidate2(candidate2 + 1)
        setCount(count + 1)
    }
    const handlethree = () => {
        setCandidate3(candidate3 + 1)
        setCount(count + 1)
    }
return (
        <div>
            {count}
            <hr />
{candidate1}
            <button onClick={handleone}>
                Ramesh
            </button>
            <hr />
            {candidate2}
            <button onClick={handletwo}>
                Umesh
            </button>
            <hr />
            {candidate3}
            <button onClick={handlethree}>
                Suresh
            </button>
        </div>
    )
}

Мы можем заменить count, используя {candidate1+candidate2+candidate3}, но я оставлю count. Это поможет нам узнать больше о состояниях.

import React from 'react';
import {useState} from 'react';
export const App = () => {
  const [vote, setVote]= useState({
    candidate1:0,candidate2:0, candidate3:0
  })
  const [count, setCount]= useState(0)
const handleone=()=>{
    const newVote= {candidate1: vote.candidate1+1, candidate2:vote.candidate2, candidate3:vote.candidate3} ;setVote(newVote)
    setCount(count+1)
  }
  const handletwo=()=>{
    const newVote= {candidate1: vote.candidate1, candidate2:vote.candidate2+1, candidate3:vote.candidate3} ;setVote(newVote)
    setCount(count+1)
  }
  const handlethree=()=>{
    const newVote= {candidate1: vote.candidate1, candidate2:vote.candidate2, candidate3:vote.candidate3+1} ;setVote(newVote)
    setCount(count+1)
  }
return (
    <div>
       {count}
       <hr/>
{vote.candidate1}
      <button onClick={handleone}>
        Ramesh
      </button>
      <hr/>
      {vote.candidate2}
       <button onClick={handletwo}>
        Umesh
      </button>
      <hr/>
      {vote.candidate3}
       <button onClick={handlethree}>
        Suresh
      </button>
    </div>
  )
}

Теперь в этой модифицированной версии мы только что объединили все состояния в одно состояние, подобное этому.

const [vote, setVote]= useState({
    candidate1:0,candidate2:0, candidate3:0
  })

А в обработчике событий мы создали новый набор голосов и назначили его setVote . Вы можете отформатировать код, используя SHIFT+ALT+F.

Мы можем использовать концепцию копирования массива. Мы можем создать массив copy из vote, используя оператор спреда ....

import React from 'react';
import { useState } from 'react';
export const App = () => {
  const [vote, setVote] = useState({
    candidate1: 0, candidate2: 0, candidate3: 0
  })
  const [count, setCount] = useState(0)
const handleone = () => {
    const newVote = {...vote, candidate1: vote.candidate1 + 1};      setVote(newVote)
    setCount(count + 1)
  }
  const handletwo = () => {
    const newVote = {...vote, candidate2: vote.candidate2 + 1};   setVote(newVote)
    setCount(count + 1)
  }
  const handlethree = () => {
    const newVote = { ...vote, candidate3: vote.candidate3 + 1 }; setVote(newVote)
    setCount(count + 1)
  }
return (
    <div>
      {count}
      <hr />
      {vote.candidate1}
      <button onClick={handleone}>
        Ramesh
      </button>
      <hr />
      {vote.candidate2}
      <button onClick={handletwo}>
        Umesh
      </button>
      <hr />
      {vote.candidate3}
      <button onClick={handlethree}>
        Suresh
      </button>
    </div>
  )
}

Всегда ли нам нужно создавать новый набор голосов? Нет, мы можем напрямую назначить setVote, скопировать и изменить массив.

import React from 'react';
import { useState } from 'react';
export const App = () => {
    const [vote, setVote] = useState({
        candidate1: 0, candidate2: 0, candidate3: 0
    })
    const [count, setCount] = useState(0)
    const handleone = () => {
        setVote({ ...vote, candidate1: vote.candidate1 + 1 })
        setCount(count + 1)
    }
    const handletwo = () => {
        setVote({ ...vote, candidate2: vote.candidate2 + 1 })
        setCount(count + 1)
    }
    const handlethree = () => {
        setVote( { ...vote, candidate3: vote.candidate3 + 1 })
        setCount(count + 1)
    }
return (
        <div>
            {count}
            <hr />
            {vote.candidate1}
            <button onClick={handleone}>
                Ramesh
            </button>
            <hr />
            {vote.candidate2}
            <button onClick={handletwo}>
                Umesh
            </button>
            <hr />
            {vote.candidate3}
            <button onClick={handlethree}>
                Suresh
            </button>
        </div>
    )
}

Теперь все готово, осталось разработать несколько условий, например, теперь каждый может видеть голос каждого кандидата во время голосования. Мы сделаем его конфиденциальным. Никто не может голосовать после 30 голосов. И после 30 голосов мы можем увидеть результат.

Таким образом, эти концепции могут быть рассмотрены в следующем чтении. Conditional Rendering .