Question

我的目标是在React中创建一个简单的打开和关闭菜单。我习惯了vannila javascript，我可以使用 getElementById 获取我的元素并将它们存储在一个变量中，并做任何我想要的东西。现在我试图做那个反应，但它变得有点困难，我尝试使用参考。

所以这是我的菜单，我想点击按钮并隐藏菜单并显示内容，这是我的目标。

import React, { Component } from 'react';
import { Grid, Row, Col } from 'react-flexbox-grid';

class Menu extends Component {

  render() {
  function handleClick(e) {
    var mobileContainer = this.refs.mobileContent1;   
    console.log(mobileContainer);
  }

    return (
      <Grid fluid>
      <div className="menuContent">
        <Row center="xs">
          <Col xs={12}>
            <span href="" className="button" onClick={handleClick}>Hello, world!</span>
          </Col>                 
        </Row>
        </div>
      </Grid>
    );
  }


}

export default Menu;

当我登录mobile mobileContainer时，我得到这是未定义的

这是我的内容组件

import React, { Component } from 'react';
import { Grid, Row, Col } from 'react-flexbox-grid';

class MobileContent extends Component {

  render() {
    return (
      <Grid fluid>
        <div className="mobileContent" ref="mobileContent1">
          <Row center="xs">
            <Col xs={12}>
              <span className="button">Hello, world!</span>
              <span className="close">X</span>              
            </Col>                 
          </Row>
        </div>
      </Grid>
    );
  }
}

export default MobileContent;

感谢您的帮助

Answer 1

我建议您使用组件的内部状态来管理菜单，而不是ref

    class Menu extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isOpen: false
        };
        this.handleClick = this.handleClick.bind(this);
    }
    handleClick(e) {
        e.preventDefault();
        this.setState(function(prevState){
            return {isOpen: !prevState.isOpen}
        });
        // Passing in a function into setState instead of an object will give you a reliable value for your component’s state and props.
    }
    render() {

        return (
            <Grid fluid>
                <div className="menuContent">
                    <Row center="xs">
                        <Col xs={12}>
                            <span href="" className="button" onClick={handleClick}>Hello, world!</span>
                            <MobileContent isOpen={this.state.isOpen} />
                        </Col>
                    </Row>
                </div>
            </Grid>
        );
    }
}

class MobileContent extends Component {

  render() {
    if (this.props.isOpen) {
        return (
            <Grid fluid>
                <div className="mobileContent" ref="mobileContent1">
                <Row center="xs">
                    <Col xs={12}>
                    <span className="button">Hello, world!</span>
                    <span className="close">X</span>              
                    </Col>                 
                </Row>
                </div>
            </Grid>
        );
    }
    return null;
  }
}

export default MobileContent;

基本上使用state来检查是否需要呈现某些内容。这只是基本的，您可以随心所欲地做任何事情：添加动画，重新组织代码等......

在React中，数据流fdown，组件可以选择将其状态作为props传递给其子组件。

你必须在React中思考而不是以jQuery的方式思考。查看此页面：https://reactjs.org/docs/thinking-in-react.html

希望有所帮助：）

Answer 2

首先，您不应该在handleClick函数中定义点击处理程序render，只要您调用render，它就会反复创建。

现在出错的原因是你没有bind你的this功能。class Menu extends Component { constructor (props) { super(props); // bind the handler this.handleClick = this.handleClick.bind(this); } // you should define your function here handleClick() { ... } render(){ ..... } }。

将您的代码更改为此类内容。

~>

React - 从另一个组件获取Div元素

2 个答案: