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

我的目标是在React中创建一个简单的打开和关闭菜单。我习惯于使用vannila javascript，在那里我可以使用getElementById获取我的元素并将它们存储在变量中，然后对它们执行我想要的任何操作。现在我试着用react做这个，但是有点困难，我试着用ref

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

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;

import React，{Component}来自'React'；
从'react flexbox Grid'导入{Grid，Row，Col}；
类菜单扩展组件{
render（）{
函数handleClick（e）{
var mobileContainer=this.refs.mobileContent1；
控制台日志（mobileContainer）；
}
返回(
你好，世界！
);
}
}
导出默认菜单；

当我控制台记录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;

import React，{Component}来自'React'；
从'react flexbox Grid'导入{Grid，Row，Col}；
类MobileContent扩展组件{
render（）{
返回(
你好，世界！
X
);
}
}
导出默认MobileContent；

---

感谢您的帮助

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

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={
伊索彭：错
};
this.handleClick=this.handleClick.bind（this）；
}
handleClick（e）{
e、 预防默认值（）；
this.setState（函数（prevState）{
返回{isOpen:！prevState.isOpen}
});
//将函数而不是对象传递到setState将为组件的状态和道具提供可靠的值。
}
render（）{
返回(
你好，世界！
);
}
}
类MobileContent扩展组件{
render（）{
如果（此.props.isOpen）{
返回(
你好，世界！
X
);
}
返回null；
}
}
导出默认MobileContent；

基本上使用

状态

检查是否需要渲染某些内容。这只是基本的，你可以做任何你想用它：添加动画，重新组织你的代码等

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

您必须以React而不是jQuery的方式思考。查看此页面：

---

希望它有帮助：）

首先，您不应该在

render

函数中定义单击处理程序

handleClick

，只要调用

render

，就会一次又一次地创建它

现在出现错误的原因是您没有将函数绑定到

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(){
 .....
 }
}

---

嘿谢谢你的帮助，我想知道！！我仍然得到“这是未定义的”！！谢谢，这是我的错。我将handleClick函数留在了render函数中。你需要把它拿出来绑起来。对不起，我应该测试一下。我已经更新了我的代码@HugoSeleiroI让它工作！！谢谢，所以我把下面的答案标记为正确，因为你帮我理解了逻辑，但他帮我解决了这个问题。谢谢！！！：大哈哈！！抱歉：谢谢你的帮助！！