ReactJs에서 Hooks useState로 여러 줄 상태를 작성하는 방법

존 D

React 16.9

나는 이것을 알고있다 class component state:

class JustAnotherCounter extends Component {
  state = {
    count: 0
  };

Hooks 를 사용하는 것과 같습니다 useState.

function JustAnotherCounter() {
  const [count, setCount] = useState(0);

.. 그러나 Hooks를 사용하는 아래 클래스 구성 요소 상태 와 동등한 것은 무엇 입니까? : useState

class Main extends Component {
    state = {
        step: 1,
        firstName: '',
        lastName: '',
        jobTitle: '',
        jobCompany: '',
        jobLocation: '',
    }

어떤 도움이라도 대단히 감사하겠습니다.

재커리 하버

클래스 구성 요소에서와 동일한 일반적인 아이디어를 사용할 수 있습니다. 개체를 직접 확산해야한다는 점을 명심하십시오.

   const [state, setState] = useState({
        step: 1,
        firstName: '',
        lastName: '',
        jobTitle: '',
        jobCompany: '',
        jobLocation: '',
    });
   // Setting state like:
   setState(prev=>{...prev,firstName:'Joey'});

여러 세트 상태 호출을 설정할 수도 있습니다.

const [step,setStep] = useState(1);
const [firstName,setFirstName] = useState('');
const [lastName,setLastName] = useState('');
const [jobTitle,setJobTitle] = useState('');
const [jobCompany,setJobCompany] = useState('');
const [jobLocation,setJobLocation] = useState('');

또 다른 옵션은 감속기를 사용하는 것입니다. 이것은 다음보다 훨씬 더 복잡한 예제로 만들 수 있습니다.

const [state, dispatch] = useReducer(
  (state, action) => ({ ...state, [action.name]: action.value }),
  {
    step: 1,
    firstName: '',
    lastName: '',
    jobTitle: '',
    jobCompany: '',
    jobLocation: '',
  }
);
// Then update values using:
dispatch({ name: 'firstName', value: 'Joey' });

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

스크립트 안에 텍스트를 작성하는 방법이 있습니까 document.write ( ''); 여러 줄로?

분류에서Dev

~ / .lldbinit에 여러 줄 매크로를 작성하는 방법은 무엇입니까?

분류에서Dev

여러 줄로 파일에서 var를 얻는 방법을 bash

분류에서Dev

기능 구성 요소에 여러 ReactJS 상태를 작성하는 방법은 무엇입니까?

분류에서Dev

여러 줄 목록에서 쉼표로 구분 된 한 줄의 여러 단어를 변환하는 방법

분류에서Dev

여러 상태를 가진 컬렉션으로 mongodb에서 두 번째로 높은 상태를 얻는 방법

분류에서Dev

소켓을 사용하여 명령 줄에서 haproxy 상태를 보는 방법

분류에서Dev

continue 또는 break 표현식을 사용하여 여러 줄 매크로를 작성하는 방법

분류에서Dev

앱에서 여러 구성 요소로 React 양식 상태를 전달하는 방법 (기능적)

분류에서Dev

pmcmd 명령 줄을 사용하여 PERL 환경에서 PowerCenter 워크 플로의 성공 / 실패 상태를 캡처하는 방법은 무엇입니까?

분류에서Dev

Netbeans IDE의 Java에서 여러 줄로 긴 메서드 호출을 작성하는 방법

분류에서Dev

TIdTCPServer에서 TIdTCPClient로 여러 줄 TStrings 데이터를 전달하는 방법

분류에서Dev

ListView에서 긴 텍스트를 여러 줄로 표시하는 방법

분류에서Dev

React Hooks, Reducer, Ajax, 새로운 상태를 전달하는 방법

분류에서Dev

React Hooks를 사용하여 여러 페이지에 중첩 된 경로를 표시하는 방법 ..?

분류에서Dev

r에서 sf 및 tmap 패키지를 사용하여 여러 상태를 플로팅하는 방법

분류에서Dev

docker-compose.yml에서 여러 줄 명령 플래그로 MySQL 인스턴스를 구성하는 방법

분류에서Dev

React Hooks, 두 함수간에 상태를 공유하는 방법

분류에서Dev

Pug 및 Facebook JS SDK에서 여러 줄 스크립트를 작성하는 방법

분류에서Dev

cider repl에서 여러 줄 함수를 작성하는 방법은 무엇입니까?

분류에서Dev

Visual Studio 2010에서 여러 줄 작업을 작성하는 방법

분류에서Dev

express.js에서 여러 매개 변수로 API를 작성하는 방법

분류에서Dev

C에서 여러 조건으로 while 루프를 작성하는 방법

분류에서Dev

여러 줄 경로를 한 줄 상대 경로로 다시 쓰는 방법

분류에서Dev

한 줄에 여러 줄 텍스트를 표시하는 방법

분류에서Dev

로그에서 여러 줄을 선택하는 방법

분류에서Dev

가로 스크롤바로 한 줄에 여러 div를 관리하는 방법

분류에서Dev

여러 줄 텍스트 상자에서 단일 텍스트 상자로 줄을 가져 오는 방법?

분류에서Dev

awk를 사용하여 조건부로 여러 줄에 줄을 추가하는 방법

Related 관련 기사

  1. 1

    스크립트 안에 텍스트를 작성하는 방법이 있습니까 document.write ( ''); 여러 줄로?

  2. 2

    ~ / .lldbinit에 여러 줄 매크로를 작성하는 방법은 무엇입니까?

  3. 3

    여러 줄로 파일에서 var를 얻는 방법을 bash

  4. 4

    기능 구성 요소에 여러 ReactJS 상태를 작성하는 방법은 무엇입니까?

  5. 5

    여러 줄 목록에서 쉼표로 구분 된 한 줄의 여러 단어를 변환하는 방법

  6. 6

    여러 상태를 가진 컬렉션으로 mongodb에서 두 번째로 높은 상태를 얻는 방법

  7. 7

    소켓을 사용하여 명령 줄에서 haproxy 상태를 보는 방법

  8. 8

    continue 또는 break 표현식을 사용하여 여러 줄 매크로를 작성하는 방법

  9. 9

    앱에서 여러 구성 요소로 React 양식 상태를 전달하는 방법 (기능적)

  10. 10

    pmcmd 명령 줄을 사용하여 PERL 환경에서 PowerCenter 워크 플로의 성공 / 실패 상태를 캡처하는 방법은 무엇입니까?

  11. 11

    Netbeans IDE의 Java에서 여러 줄로 긴 메서드 호출을 작성하는 방법

  12. 12

    TIdTCPServer에서 TIdTCPClient로 여러 줄 TStrings 데이터를 전달하는 방법

  13. 13

    ListView에서 긴 텍스트를 여러 줄로 표시하는 방법

  14. 14

    React Hooks, Reducer, Ajax, 새로운 상태를 전달하는 방법

  15. 15

    React Hooks를 사용하여 여러 페이지에 중첩 된 경로를 표시하는 방법 ..?

  16. 16

    r에서 sf 및 tmap 패키지를 사용하여 여러 상태를 플로팅하는 방법

  17. 17

    docker-compose.yml에서 여러 줄 명령 플래그로 MySQL 인스턴스를 구성하는 방법

  18. 18

    React Hooks, 두 함수간에 상태를 공유하는 방법

  19. 19

    Pug 및 Facebook JS SDK에서 여러 줄 스크립트를 작성하는 방법

  20. 20

    cider repl에서 여러 줄 함수를 작성하는 방법은 무엇입니까?

  21. 21

    Visual Studio 2010에서 여러 줄 작업을 작성하는 방법

  22. 22

    express.js에서 여러 매개 변수로 API를 작성하는 방법

  23. 23

    C에서 여러 조건으로 while 루프를 작성하는 방법

  24. 24

    여러 줄 경로를 한 줄 상대 경로로 다시 쓰는 방법

  25. 25

    한 줄에 여러 줄 텍스트를 표시하는 방법

  26. 26

    로그에서 여러 줄을 선택하는 방법

  27. 27

    가로 스크롤바로 한 줄에 여러 div를 관리하는 방법

  28. 28

    여러 줄 텍스트 상자에서 단일 텍스트 상자로 줄을 가져 오는 방법?

  29. 29

    awk를 사용하여 조건부로 여러 줄에 줄을 추가하는 방법

뜨겁다태그

보관