React中通过diaplay实现控件按钮的呈现与隐藏

class Game extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      display_name: "none" //此状态机为display的取值
    };
  }
  display_name() {
    //编辑按钮的单击事件，修改状态机display_name的取值
    if (this.state.display_name == "none") {
      this.setState({
        display_name: "block"
      });
    } else if (this.state.display_name == "block") {
      this.setState({
        display_name: "none"
      });
    }
  }
  render() {
    return (
      <div>
        {/* 按钮 */}
        <div className="recordBtn" onClick={this.display_name.bind(this)}>
          记录结果
        </div>
        {/* 灰色背景图蒙版 */}
        <div
          id="bg"
          className="bgZhe"
          style={{
            display: this.state.display_name
          }}
        ></div>

        {/* 弹窗内容 */}
        <div
          className="biao"
          style={{
            display: this.state.display_name
          }}
        >
          <div className="tittle">
            <span>记录结果</span>
            <span onClick={this.display_name.bind(this)}>x</span>
          </div>
          <div>............ </div>
        </div>
      </div>
    );
  }
}

export default Game;