양방향 바인딩 반응

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

React 양방향 바인딩을 사용하면 볼 때 현재 상태를 유지하고 변경을 위해 본 상태에 액세스할 수 있습니다. 즉, 현재 상태를 잃지 않고 업데이트됩니다. 상태 변경을 허용하는 두 가지 가장 일반적인 이벤트 유형은 onChange 및 onClick 입니다.

Person/Person.js 파일에서 속성onChanged은 입력이 변경되면 실행됩니다. {props.changed}는 App.js에서 메서드를 실행하기 위한 참조로 전달됩니다.

아래 예를 참조하십시오.

import React from 'react';

const Person = props => {
    return (
        <div className="App">
            <h3>Name: {props.name}</h3>
            <h3>Skill: {props.language}</h3>
            <h3>ID: {props.id}</h3>
            <input type="text" onChange={props.changedName} />
        </div>
    );
};

export default Person;

하나의 구성 요소에 집중합시다.

사람/Person.js

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

const App = () => {
  const [state, setState] = useState({
    persons: [
      { name: 'Bello', language: 'React', id: '2sdr3' },
    ]
  });

  const personNameHandler = event => {
    setState({
      persons: [
        { name: event.target.value, language: 'React', id: '2sdr3' },
      ],
    })
  };

  return (
    <div>
      <Person
        name={state.persons[0].name}
        language={state.persons[0].language}
        id={state.persons[0].id} 
        changedName={personNameHandler}/>
    </div>
  );
};

export default App;

위의 코드 스니펫에서 이벤트 개체는 입력 필드에 대한 액세스를 허용하여 값을 입력합니다. 문제는 대상 입력 필드가 초기 값Bello을 보유하지 않는다는 것입니다. 상태를 변경하기 전에 이름Bello을 보려면 기본적으로 필드에 값을 설정해야 합니다. 즉, onChanged 특성을 value 특성으로 재정의해야 합니다.

아래 예를 참조하십시오.

사람/Person.js

import React from 'react';

const Person = props => {
    return (
        <div className="App">
            <h3>Name: {props.name}</h3>
            <h3>Skill: {props.language}</h3>
            <h3>ID: {props.id}</h3>
            <input
                type="text"
                onChange={props.changedName}
                value={props.name} />
        </div>
    );
};

export default Person;

value={props.name} 속성을 재정의하는 속성onChange에 주목하십시오.

이제 Bello라는 이름을 볼 수 있고 입력 필드에 입력하여 본 이름을 다른 이름으로 업데이트할 수 있습니다. 이것이 React에서 Two-way Binding이라고 불리는 것입니다.

참고: App.js에서 onChanged는 Person/Person.js의 props.changed 함수에 대한 참조를 보유하고 있기 때문에 personNameHandler에 바인딩되었습니다.

행복한 코딩!!!

테크스택 | 플러터웨이브

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



Sign up today to get started

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