React组件之间的沟通

我刚刚开始使用React，它似乎只是美丽的创建用户界面，但是，我确实遇到组件间通信问题。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的状态属性。根据状态，将一个附加类添加到按钮中。

我们假设我的页面上有2个这样的OfficeUIButton组件，我怎么能通过点击第一个按钮使第二个按钮处于活动状态？

这只是一个虚拟的例子，但我需要这个例如模式弹出，或基于某些行动禁用按钮。

感谢您的帮助。

来源

2016-12-02 Complexity

[提起状态]（https://facebook.github.io/react/docs/lifting-state-up.html）。如果多个组件在某种程度上相互依赖，那么该州应该由其共同的祖先之一拥有。 –

可能的重复：[ReactJS两个组件通信]（https://stackoverflow.com/questions/21285923/reactjs-two-components-communicating） – oklas

然后，您需要在父组件中控制按钮的状态。你可以这样做：

按钮组件，你通过的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。

希望这会有所帮助。

来源

2016-12-02 08:07:24 Boky

我忘了提及，如果没有父元素？ – Complexity

你会在哪里渲染按钮组件？ – Boky

它直接在页面上，而不在另一个组件内。经过一番阅读，我想我需要一个像Flux这样的事件系统，还是这是一个误解？ – Complexity

你应该在更高的组件（让我们来简单解释一下，它是一个页面），你将在哪里存储一个本地存储以及你将传递给每个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} />

，不使用跨度为一个按钮。

来源

2016-12-02 08:15:55 Shiroo

我忘了提及，如果没有父元素呢？ – Complexity

使用redux这样的东西，因为如果他们在相同的水平，那么现在意味着彼此之间现实的连接。 – Shiroo

React组件之间的沟通

回答

相关问题