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组件，如何通过单击第一个按钮激活第二个按钮？

这只是一个虚拟的例子，但我需要这个例子用于模态弹出窗口，或基于某个动作禁用按钮。

感谢您的帮助。

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>
    )
  }
}

然后在您的父级中，您需要有一个状态，您将传递给按钮组件和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>
       )
    }
}

不要忘记在按钮

中实际处理OfficeUIButton中的禁用和onClick道具

<button disabled={props.disabled} />

并且不要将Span用作按钮。

在React Components之间进行通信

2 个答案: