React 학습 의 제어 모듈 과 데이터 공유 실례 분석

본 고의 실례 는 React 학습 의 제 어 된 구성 요소 와 데이터 공 유 를 설명 한다.여러분 께 참고 하도록 공유 하 겠 습 니 다.구체 적 으로 는 다음 과 같 습 니 다.
HTML 에서,

,<select>와 같은 폼 요 소 는 스스로 값 을 저장 하고 사용자 의 입력 에 따라 업 데 이 트 됩 니 다.그러나 React 에 서 는 가 변 적 인 값 을 구성 요소 의 state 에 저장 하고 setState()방법 으로 만 업데이트 할 수 있 습 니 다.이들 의 갈등 을 해결 하기 위해 HTML 요 소 는 더 이상 데 이 터 를 저장 하지 않 고 react 에서 온 state 를 사용 할 수 있 습 니 다.즉,HTML 요 소 는 데 이 터 를 react 구성 요소 의 state 에 저장 하고 state 값 에 따라 HTML 업데이트 내용 을 렌 더 링 하 는 것 입 니 다.이 값 은 React 가 제어 하 는 폼 요소 에서 제어 되 는 구성 요소 라 고 합 니 다.<br>1、input<br>예 를 들 어 input 가 입력 한 이름 을 state.name 에 저장 하고 input 가 표시 하 는 value 값 을 state.name 으로 설정 합 니 다.input 에 변 화 를 입력 할 때 onChange 는 updateName 함수 가 name 값 을 업데이트 하여 input 에 표 시 된 value 를 변화 시 킵 니 다.제출 단 추 를 누 르 면 onClick 에서 submit()방법 을 터치 하여 기본 제출 을 막 고 알림 정 보 를 인쇄 합 니 다.<pre><code>
class ControlledForm extends React.Component{
 constructor(props){
  super(props);
  this.state={
   name:''
  };
  this.updateName=this.updateName.bind(this);
  this.submit=this.submit.bind(this);
 }
 updateName(e){        //在调用函数时会默认传入时间参数e
  this.setState({
   name:e.target.value    //更新name的值为input中输入的值
  })
 }
 submit(e){          //自己定义点击submit后的操作
  console.log("姓名"+this.state.name+"提交成功");
  e.preventDefault();     //阻止表单默认提交行为
 }
 render(){
  return (
   <form onSubmit={this.submitForm}>
     <label>
       姓名：
       <input type="text" value={this.state.name} onChange={this.updateName} />
     </label>
     <input type="submit" value="提交" onClick={this.submit} />
   </form>
  )
 }
}

</code></pre>제 어 된 구성 요 소 를 사용 하여 페이지 의 데 이 터 를 react 의 제어 하에 있 고 데 이 터 를 처리 한 후에 페이지 에 렌 더 링 할 수 있 습 니 다.<br>2、textarea<br>React 에서<textarea>를 사용 합 니 다.textarea 의 입력 내용 을 제어 하기 위해 react 의 textarea 는 input 처럼 value 로 표 시 된 값 을 제어 하고 e.target.value 를 통 해 textarea 의 값 을 state 에 저장 합 니 다.textarea 의 사용 도 닫 힌 탭<textarea>

에서 열 린 탭 으로 변 합 니 다.


<textarea value={this.state.text} onChange={this.updateText} />

3、select
마찬가지 로 React 의

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

바삭바삭하고 간단한 결제 페이지 만들기

먼저 Next.js에서 프로젝트를 만듭니다. Vercel & Next.js가 매우 편하기 때문에 최근에는이 구성을 사용하고 있습니다. 그런 다음 Tailwind CSS를 넣습니다. Tailwind CSS를 사용하면 ...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다