반응 상태 이벤트 처리 — 1

이 기사는 Flutterwave의 후원을 받았습니다. Flutterwave는 전 세계 어디에서나 고객으로부터 온라인과 오프라인으로 결제를 하고 수락하는 가장 쉬운 방법입니다. 완전 무료입니다!

상태는 클래스 기반 구성 요소에서 관리됩니다. props 속성이 있는 기능적 구성 요소는 별도의 파일에서 클래스 구성 요소의 데이터를 받아들이는 템플릿과 같은 구성 요소입니다.

State property is used in a class component to detect changes when an event is fired. Such a component is called a stateful component or smart component

아래 예를 참조하십시오.

App.js

import React from 'react';

const Person = props => {
    return (
        <div className="App">
            <h3>Name: {props.name}</h3>
            <h3>Skill: {props.language}</h3>
        </div>
    );
};

export default Person;

이것이 우리가 기사React Props and State에서 본 것입니다.

App.css

.App {
  margin: 20px auto;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
  line-height: 1.7; 
  display: flex;
  width: 9.375rem;
  font-family: sans-serif;
}

.App:hover {
  box-shadow: 0 1px 2px 3px #eee;
  transform: scale(1.01);
}

button {
  display: block;
  margin: auto;
  padding: 10px;
}

사람/Person.js

import React from 'react';
import { Component } from 'react';
import './App.css';
import Person from './Person/Person';

class App extends Component {
  state = {
    person: [
      { name: 'Bello', language: 'React' },
      { name: 'Michael', language: 'Vue' },
      { name: 'Mary', language: 'Angular' }
    ]
  }
  render() {
    return (
      <div>
        <Person name={this.state.person[0].name} 
                language={this.state.person[0].language} />
        <Person name={this.state.person[1].name} 
                language={this.state.person[1].language} />
        <Person name={this.state.person[2].name} 
                language={this.state.person[2].language} />
      </div>
    );
  }
}

export default App;

우리는 지금까지 열심히 코딩했지만 이벤트가 발생할 때만 DOM의 변경을 원하면 어떻게 할까요? 앱에서 상태 속성을 허용하도록 위 코드를 수정해 보겠습니다.

사람/Person.js

import React from 'react';
import { Component } from 'react';
import './App.css';
import Person from './Person/Person';

class App extends Component {
  state = {
    persons: [
      { name: 'Bello', language: 'React', id: '2sdr3' },
      { name: 'Michael', language: 'Vue', id: 'de6c3' },
      { name: 'Mary', language: 'Angular', id: 'c1z3x' }
    ]
  }

  personHandler = () => {
    this.setState({
      persons: [
        { name: 'Andela', language: 'Ember', id: '2sdr3' },
        { name: 'John', language: 'Backbone', id: 'de6c3' },
        { name: 'Mary', language: 'Angular', id: 'c1z3x' }
      ]
    })
  }

  render() {
    return (
      <div>
        <Person
          name={this.state.persons[0].name}
          language={this.state.persons[0].language}
          id={this.state.persons[0].id} />
        <Person
          name={this.state.persons[1].name}
          language={this.state.persons[1].language}
          id={this.state.persons[1].id} />
        <Person
          name={this.state.persons[2].name}
          language={this.state.persons[2].language}
          id={this.state.persons[2].id} />
        <button 
          onClick={this.personHandler}>Change Person State</button>
      </div>
    );
  }
}

export default App;

위의 코드 스니펫에서 state 속성은 클래스의 현재 Person 객체 값을 보유합니다. 또한 React 및 { Component }를 react 모듈에서 가져올 때 setState() 메서드와 같은 몇 가지 메서드에 액세스할 수 있었습니다. 상태 설정 메서드는 버튼 클릭과 같은 이벤트가 발생할 때마다 해당 상태의 Person 개체를 재정의하는 역할을 합니다.

React는 camelCase 명명 규칙을 사용하므로 Vanilla JavaScript의 이벤트 유형onClick 대신 React 요소 속성onclick이 사용됩니다.



다음 기사에서 React State Handling에 대해 자세히 알아보십시오.

행복한 코딩!!!




.ltag__user__id__428113 .follow-action-button {
배경색: #000000 !중요;
색상: #ffffff !중요;
테두리 색상: #000000 !중요;
}

벨로

Hi, I am Bello Osagie, a tech blogger, writer, and web developer. I teach web development for free… Join me to learn, discover, and have fun coding together!

테크스택 | 플러터웨이브

Flutterwave에서 후원하는 Techstack 기사. Flutterwave는 전 세계 어디에서나 고객으로부터 온라인과 오프라인 모두에서 결제를 하고 수락하는 가장 쉬운 방법입니다. 완전 무료입니다! 또한 signup 을(를) 사용할 때 Flutterwave 달러 교환 카드를 받습니다. 온라인 상점을 열고 전 세계 어디에서나 비즈니스를 수행하십시오.



Sign up today to get started

Support 내가 하는 일과 계속해서 무료 콘텐츠를 만들도록 밀어붙이는 것.