React 구성 요소 간 통신

Question

React로 시작한 것만으로도 사용자 인터페이스를 만드는 것이 좋을 것 같지만 구성 요소 간 통신에 문제가 있습니다. 내가해야합니까

은 매우 단순 버튼을 나타내는 요소를 반응 :

import React from 'react'; 

export default class OfficeUIButton extends React.Component { 

    constructor(props) { 
    super(props); 
    this.state = { 
     active: false, 
    }; 

    // Bind the event handlers. 
    this.onMouseDownEventHandler = this.onMouseDownEventHandler.bind(this); 
    this.onMouseUpEventHandler = this.onMouseUpEventHandler.bind(this); 
    } 

    onMouseDownEventHandler() { 
    this.setState({ 
     active: true 
    }); 
    } 

    onMouseUpEventHandler() { 
    this.setState({ 
     active: false 
    }); 
    } 

    render() { 
    return <div className={"officeui-button" + (this.state.active ? ' active': '')} onMouseDown={this.onMouseDownEventHandler} 
       onMouseUp={this.onMouseUpEventHandler}> 
       <span className="officeui-button-label">{this.props.text}</span> 
      </div> 
    } 
} 

이 구성 요소는 active라는 이름의 상태 속성이 있습니다. 상태에 따라 버튼에 추가 클래스가 추가됩니다.

내 페이지에 OfficeUIButton 개 중 2 개가 있다고 가정 해 봅시다. 어떻게 첫 번째 버튼을 클릭하여 두 번째 버튼을 활성화 할 수 있습니까?

이것은 모범적 인 예일뿐입니다. 예를 들어 모달 팝업을 사용하거나 특정 작업을 기반으로 버튼을 사용하지 않도록 설정해야합니다.

도움 주셔서 감사합니다.

Answer 1

그러면 버튼을 제어 할 상위 구성 요소의 상태가 필요합니다.

class Button extends React.Component { 
    render(){ 
    let disabled = this.props.active ? "disabled" : ""; 
    return(
     <div><button onClick={this.props.onClick} disabled={disabled}>Button</button></div> 
    ) 
    } 
} 

그런 다음 부모에 당신이 버튼 구성 요소에 전달하는 상태를 가질 필요가

당신이 온 클릭 소품 및 활성 소품을 통과

버튼 구성 요소 : 당신은 뭔가를 할 수 있습니다 및 onClick 함수 :

class Test extends React.Component { 
    constructor(props){ 
     super(props); 

     this.state = { 
     active: false 
     } 
    } 

    handleClick(event){ 
     this.setState({active: !this.state.active}); 
    } 

    render(){ 
     return (
     <div> 
      <Button onClick={this.handleClick.bind(this)}/> 
      <Button active={this.state.active}/> 
     </div> 
    ) 
    } 
} 

React.render(<Test />, document.getElementById('container')); 

여기는 fiddle입니다.

희망이 도움이됩니다.

Answer 2

로컬 저장소를 저장할 위치와 각 UIOFficeButton에이 상위 구성 요소 상태를 설정하는 함수를 전달할 상위 구성 요소 (페이지라는 것을 쉽게 설명하기 위해 가정 해 봅시다). Button1을 true로 클릭하고 해당 상태를 다른 구성 요소로 보냅니다.

class Test extends React.Component { 
    constructor(props){ 
     super(props); 
     this.state = { 
      buttonOneClicked: false 
     } 
     } 

handleClickButtonOne =() => this.setState({buttonOneClicked: true}); 

render(){ 
     return (
      <div> 
       <OfficeUIButton onClick={this.handleClickButtonOne} /> 
       <OfficeUIButton disabled={this.state.buttonOneClicked} /> 
      </div> 
     ) 
    } 
} 

실제로 버튼

<button disabled={props.disabled} /> 

에서처럼 OfficeUIButton에서 해당 장애인의 onclick 소품을 처리하는 것을 잊지 마십시오 버튼으로 스팬을 사용하지 마십시오.