이 자습서는 REACT 이벤트, 제어 구성 요소 및 이벤트 처리를 설명하여 제어 된 양식을 작성하고 자식에서 부모 구성 요소로 데이터를 방출하는 방법을 보여줍니다. React를 사용하여 사용자 프로필 양식을 작성하겠습니다
먼저, 새로운 React 앱을 만듭니다. 에 위치한 구성 요소는 사용자 프로필 세부 사항에 대한 양식을 렌더링합니다. 루트 구성 요소로 가져 오십시오 () :
스타일 : 를 사용하여 양식을 스타일
UserProfile
이벤트를 사용하겠습니다. import UserProfile from './UserProfile';
function App() {
return (
);
}
export default App; : 에서 입력을 수정하십시오
마찬가지로 각 상태 변수와 후크를 사용하여 , src/App.css 및 입력을 업데이트하십시오.
상태를 기록하려면
: .App {
text-align: left;
margin-left: 20%;
margin-right: 20%;
}
label {
display: inline-block;
margin-right: 1em;
width: 4em;
}
input {
width: 15em;
}
제출 버튼을 업데이트하여 : 를 호출하십시오
"제출"을 클릭하면 양식 데이터를 콘솔에 로그인합니다. 이것은 양방향 데이터 바인딩을 보여줍니다.보기의 변경 상태를 업데이트하고 상태 변경 사항이 뷰를 업데이트합니다.
방출 이벤트
아동 ()의 데이터를 부모 ()로 보내려면 이벤트가 발생합니다. :
: 에 a를 추가하십시오
제출 버튼을 업데이트하여 onChange : 를 호출하십시오
name
이제 에서 콜백 함수를 추가하고 소품으로 : 로 전달하십시오.
UserProfile.js
이제 양식을 제출하면 제출 된 데이터가 표시되어 부모 구성 요소가 업데이트됩니다.
<input id="name-field" type="text" value="{name}" onchange="{(e)"> setName(e.target.value)}
/>
이것은 튜토리얼을 완성합니다. 제어 된 구성 요소를 만들고 이벤트를 처리하며 RECT에서 이벤트를 방출하는 방법을 배웠습니다. 자리 표시 자 이미지 경로를 실제 이미지 경로로 바꾸는 것을 잊지 마십시오. email
위 내용은 React의 형태와 사건을 이해합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
