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つのコンポーネントがページにあるとしましょう。最初のボタンをクリックして2番目のボタンをアクティブにするにはどうすればよいですか？

これは単なるダミーの例ですが、私はモーダルポップアップや、特定のアクションに基づいてボタンを無効にするために必要です。

ありがとうございました。

Answer 1

ボタンを制御する親コンポーネントの状態が必要です。あなたはのonClick小道具とアクティブ小道具

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

を渡す

Buttonコンポーネント、そして、あなたの親にあなたはボタンコンポーネントに渡す状態を持っている必要があります：あなたのような何かを行うことができます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をオンにして、その状態を他のコンポーネントにも送信します。

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の小道具を扱うことを忘れてはいけないとボタンとしてスパンを使用していません。