양방향 바인딩 반응
11800 단어 reactcodenewbieprogrammingjavascript
이 기사는 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 내가 하는 일과 계속해서 무료 콘텐츠를 만들도록 밀어붙이는 것.
Reference
이 문제에 관하여(양방향 바인딩 반응), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/bello/react-two-way-binding-3006텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)