reactjs – React.js中的抽屉

发布时间：2020-12-15 16:14:43 所属栏目：百科来源：网络整理

导读：我有一个抽屉组件,带有一个打开这个抽屉的按钮. 我想通过点击页面上的任何地方来关闭抽屉,除了抽屉区域.我试过这段代码.它适用于开放,但它不适合关闭. var Child = React.createClass({ render: function() { return ( div className="chatBar" div onClick=

我有一个抽屉组件,带有一个打开这个抽屉的按钮.
我想通过点击页面上的任何地方来关闭抽屉,除了抽屉区域.我试过这段代码.它适用于开放,但它不适合关闭.

var Child = React.createClass({
  render: function() {
    return (
        <div className="chatBar">
            <div onClick={this.onClick} className="closeBTN">
                <img src="../src/contents/images/svg/close.svg"/>
            </div>

            <Tab />
        </div>
        );
  }
});

var ChatBar = React.createClass({
  getInitialState: function () {
    return { childVisible: false,childInVisible: true,};

  },render: function() {
    return(
      <div>
        <div onClick={this.onClick} className="chatBTN">
         <img src="../src/contents/images/svg/chat.svg"/>
        </div>
        {
          this.state.childVisible
            ? <Child />
            : null
        }
      </div>
    )
  },onClick: function() {
    this.setState({childVisible: !this.state.childVisible});
  },onClickClose: function(){
    this.setState({childInVisible: !this.state.childInVisible});
  },});

export default ChatBar;

解决方法

请查看工作演示 JSFiddle.

var Child = React.createClass({
  render: function() {
    return (
        <div className="chatBar">
            <div onClick={this.props.onClick} className="closeBTN">
                <img src="http://www.freeiconspng.com/uploads/silver-close-button-png-15.png"/>
            </div>
        </div>
        );
  }
});

var ChatBar = React.createClass({
  getInitialState: function () {
    return { childVisible: false };

  },render: function() {
    return(
      <div>
        <div onClick={this.onToggle} className="chatBTN">
         <img src="http://www.omeglechat.eu/wp-content/uploads/2016/10/omegle-mnogochat.png"/>
        </div>
        {
          this.state.childVisible
            ? <Child onClick={this.onToggle.bind(this)} />
            : null
        }
      </div>
    )
  },onToggle: function() {
    this.setState({childVisible: !this.state.childVisible});
  }
});


React.render(<ChatBar />,document.body);

首先,在州内使用一个标志：

onToggle: function() {
    this.setState({childVisible: !this.state.childVisible});
  }

其次,为了调用子组件中的函数(onClick),您需要通过< Child onClick = {this.onToggle.bind(this)} />传入处理程序,并在子组件中调用它通过onClick = {this.props.onClick}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!