Javascript 如何在react js中单击按钮全屏打开组件？

我有一个react应用程序，点击一个按钮，我会显示一个嵌套的菜单列表，用于选择选项，但现在它非常小，但现在点击它只是显示在一个小部分

我的嵌套菜单组件

api下拉列表

：

  render() {
    return (
      <div>
        <select
          className="select"
          id="selectBox"
          multiple="multiple"
          onChange={this.changeFunc}
        >
          <option selected disabled className="option">
            Choose here
          </option>
          {this.state.options.map(
            (key, value) => (
              console.log(key["apis"]),
              (
                <>
                  <optgroup label={key["key"]} className="groupOpt">
                    <option
                      selected=""
                      value="Select All"
                      id={"Select All".concat(key["key"])}
                      class="option"
                      onClick={() =>
                        this.onClick(
                          key["key"],
                          "Select All".concat(key["key"])
                        )
                      }
                    >
                      Select All
                    </option>
                    {key["apis"].map((i, value) => (
                      <option
                        selected=""
                        className="option"
                        id={i}
                        value={i}
                        onClick={() => this.onClick(key["key"], i)}
                      >
                        {i}
                      </option>
                    ))}
                  </optgroup>
                </>
              )
            )
          )}
        </select>
        <div>
          {
            (console.log(this.state.saveflag),
            this.state.saveflag ? (
              <></>
            ) : (
              <button
                type="button"
                className="btn"
                onClick={e=> {
                  e.preventDefault();
                    this.props.data.handleApiGrants(apis);
                    this.setState({ saveflag: true });
                }}
              >
                Save
              </button>
            ))
          }
        </div>
      </div>
    );
  }
}

---

你必须使用CSS来全屏显示你的模态

创建一个css，如下所示：

.myModal {
  position: fixed;
  top: 0;
  left: 0;
  width:100%;
  height: 100%;
  background: 'white';
}

然后在您的

组件主

div

类中使用它：

  render() {
    return (
      <div className="myModal">
        <select
          className="select"
          id="selectBox"
          multiple="multiple"
          onChange={this.changeFunc}
        >
          <option selected disabled className="option">
            Choose here
          </option>
          {this.state.options.map(
            (key, value) => (
              console.log(key["apis"]),
              (
                <>
                  <optgroup label={key["key"]} className="groupOpt">
                    <option
                      selected=""
                      value="Select All"
                      id={"Select All".concat(key["key"])}
                      class="option"
                      onClick={() =>
                        this.onClick(
                          key["key"],
                          "Select All".concat(key["key"])
                        )
                      }
                    >
                      Select All
                    </option>
                    {key["apis"].map((i, value) => (
                      <option
                        selected=""
                        className="option"
                        id={i}
                        value={i}
                        onClick={() => this.onClick(key["key"], i)}
                      >
                        {i}
                      </option>
                    ))}
                  </optgroup>
                </>
              )
            )
          )}
        </select>
        <div>
          {
            (console.log(this.state.saveflag),
            this.state.saveflag ? (
              <></>
            ) : (
              <button
                type="button"
                className="btn"
                onClick={e=> {
                  e.preventDefault();
                    this.props.data.handleApiGrants(apis);
                    this.setState({ saveflag: true });
                }}
              >
                Save
              </button>
            ))
          }
        </div>
      </div>
    );
  }
}

render（）{
返回(
选择这里
{this.state.options.map(
（键，值）=>(
console.log（键[“API”]），
(
这个.onClick(
键[“键”]，
“全选”.concat（键[“键”]）
)
}
>
全选
{key[“api”].map（（i，value）=>(
this.onClick（key[“key”]，i）}
>
{i}
))}
)
)
)}
{
（console.log（this.state.saveflag），
这个.state.saveflag(
) : (
{
e、 预防默认值（）；
这个.props.data.handleApiGrants（API）；
this.setState（{saveflag:true}）；
}}
>
拯救
))
}
);
}
}

现在它只出现在屏幕的左上角。它阻塞了整个屏幕，但只显示在左上角，大小与之前相同。我已经更新了问题中的

选择

css样式。我认为是它导致了错误。现在工作，谢谢，因为它阻止了整个过程，现在你必须找到一种方法来更新一个状态来关闭它。然后把它放在中间或者你喜欢的地方。祝你好运@rudeTool

.myModal {
  position: fixed;
  top: 0;
  left: 0;
  width:100%;
  height: 100%;
  background: 'white';
}

  render() {
    return (
      <div className="myModal">
        <select
          className="select"
          id="selectBox"
          multiple="multiple"
          onChange={this.changeFunc}
        >
          <option selected disabled className="option">
            Choose here
          </option>
          {this.state.options.map(
            (key, value) => (
              console.log(key["apis"]),
              (
                <>
                  <optgroup label={key["key"]} className="groupOpt">
                    <option
                      selected=""
                      value="Select All"
                      id={"Select All".concat(key["key"])}
                      class="option"
                      onClick={() =>
                        this.onClick(
                          key["key"],
                          "Select All".concat(key["key"])
                        )
                      }
                    >
                      Select All
                    </option>
                    {key["apis"].map((i, value) => (
                      <option
                        selected=""
                        className="option"
                        id={i}
                        value={i}
                        onClick={() => this.onClick(key["key"], i)}
                      >
                        {i}
                      </option>
                    ))}
                  </optgroup>
                </>
              )
            )
          )}
        </select>
        <div>
          {
            (console.log(this.state.saveflag),
            this.state.saveflag ? (
              <></>
            ) : (
              <button
                type="button"
                className="btn"
                onClick={e=> {
                  e.preventDefault();
                    this.props.data.handleApiGrants(apis);
                    this.setState({ saveflag: true });
                }}
              >
                Save
              </button>
            ))
          }
        </div>
      </div>
    );
  }
}