반응 하위 구성 요소에서 상위 구성 요소로 값을 전달하는 방법은 무엇입니까?-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

반응 하위 구성 요소에서 상위 구성 요소로 값을 전달하는 방법은 무엇입니까?

青灯夜游

Nov 24, 2020 pm 02:44 PM

react구성 요소 전달 값

React 하위 컴포넌트가 상위 컴포넌트에 값을 전달하는 방법: 상태의 초기값과 상위 컴포넌트에서 상태를 처리할 함수를 설정하고, 하위 컴포넌트에 props 속성 형태로 함수명을 전달합니다. 값 및 하위 구성 요소 호출은 상위 구성 요소의 기능을 통해 상태 변경이 상위 구성 요소의 하위 구성 요소에 대한 변경 사항을 표시하도록 합니다.

반응 하위 구성 요소에서 상위 구성 요소로 값을 전달하는 방법은 무엇입니까?

이 튜토리얼의 운영 환경: windows7 시스템, React16 버전 이 방법은 모든 브랜드의 컴퓨터에 적합합니다.

관련 추천: "React Video Tutorial"

하위 구성 요소는 자체 상태를 제어한 다음 상위 구성 요소에 자체 상태를 알려야 하고, props를 통해 상위 구성 요소의 상태를 제어하는 데 사용되는 함수를 호출해야 합니다. 상위 구성요소 상태 변경에 하위 구성요소를 표시합니다.

/***实现在输入框输入邮箱时，在p中即时显示输入内容***/


<body>
  <p id="test"></p>
</body>

//子组件
var Child = React.createClass({
  render: function(){
    return (
      <p>
        邮箱：<input onChange={this.props.handleEmail}/>
      </p>
    )
  }
});

//父组件
var Parent = React.createClass({
  getInitialState: function(){
    return {
      email: &#39;&#39;
    }
  },
  handleEmail: function(event){
    this.setState({email: event.target.value});
  },
  render: function(){
    return (
      <p>
        <p>邮箱：{this.state.email}</p>
        <Child name="email" handleEmail={this.handleEmail.bind(this)}/>
      </p>
    )
  }
});
React.render(
 <Parent />,
 document.getElementById(&#39;test&#39;)
);

원리:

props를 사용하여 이벤트 참조를 전달하고 콜백을 통해 구현합니다. 이 구현은 특별히 좋지는 않지만 도구 없이 간단한 구현입니다.

분석:

React에서 구성 요소는 상태가 변경될 때만 업데이트됩니다. 부모 컴포넌트에서 state의 초기값과 상태를 처리할 함수를 설정하고, 함수명을 props 속성값 형태로 자식 컴포넌트에 전달하여 자식 컴포넌트가 부모 컴포넌트의 함수를 호출함으로써 상태가 변경되게 합니다. 상위 구성 요소의 상태를 변경하려는 목적을 달성하기 위해 구성 요소는 하위 구성 요소의 변경 사항을 표시합니다.

프로그래밍 관련 지식을 더 보려면 프로그래밍 비디오 코스를 방문하세요! !

위 내용은 반응 하위 구성 요소에서 상위 구성 요소로 값을 전달하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사