尝试在渲染之外渲染弹出窗口：React Js

Question

我试图在点击相应链接的基础上弹出。在这里我可以看到 onClick 随着状态变化而被触发但是没有模态出现。

谁能告诉我我做错了什么。我正在为相同的目的使用语义-ui-反应模态

沙盒：https://codesandbox.io/s/semantic-ui-example-seg91?file=/Modal.js

import React from "react";
import Modal from "./Modal";

class LoaderExampleText extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isModalOpen: false
    };
  }

  setModal = (e, value) => {
    console.log(value);
    e.stopPropagation();
    this.setState({ isModalOpen: true });
    return (
      <Modal
        modalOpen={this.state.isModalOpen}
        handleClose={() => {
          this.setState({ isModalOpen: false });
        }}
        items={value}
      />
    );
  };
  render() {
    return (
      <>
        <a onClick={e => this.setModal(e, "first item")}>Modal A</a>
        <a onClick={e => this.setModal(e, "second Item")}>Modal B</a>
      </>
    );
  }
}
export default LoaderExampleText;

import * as React from "react";
import { Modal } from "semantic-ui-react";

class NestedTableViewer extends React.Component {
  render() {
    return (
      <>
        <Modal closeIcon={true} open={this.props.modalOpen}>
          <Modal.Header>Modal</Modal.Header>
          <Modal.Content>
            <h1> {this.props.items}</h1>
          </Modal.Content>
        </Modal>
      </>
    );
  }
}

export default NestedTableViewer;

Answer 1

将值保存到状态并将模态移动到渲染器中 return。所有可渲染的 JSX 都需要 return 作为单个节点树。

import React from "react";
import Modal from "./Modal";

class LoaderExampleText extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isModalOpen: false,
      value: null
    };
  }

  setModal = (e, value) => {
    console.log(value);
    e.stopPropagation();
    this.setState({ isModalOpen: true, value });
  };

  render() {
    return (
      <>
        <a onClick={e => this.setModal(e, "first item")}>Modal A</a>
        <a onClick={e => this.setModal(e, "second Item")}>Modal B</a>
        <Modal
          modalOpen={this.state.isModalOpen}
          handleClose={() => {
            this.setState({ isModalOpen: false, value: null });
          }}
          items={this.state.value}
        />
      </>
    );
  }
}
export default LoaderExampleText;

Answer 2

在setModal中是一个函数，所以你不能那样想，但是如果你想return你必须在render中添加{setModal}。所以在这种情况下：从 "react" 导入 React；从“./Modal”导入模态；

class LoaderExampleText extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isModalOpen: false,
      value: ""
    };
  }

  setModal = (e, value) => {
    console.log(value);
    e.stopPropagation();
    this.setState({ isModalOpen: true });
    this.setState({ value: value });
  };
  render() {
    return (
      <>
        <a onClick={e => this.setModal(e, "first item")}>Modal A</a>
        <a onClick={e => this.setModal(e, "second Item")}>Modal B</a>

        <Modal
          modalOpen={this.state.isModalOpen}
          handleClose={() => {
            this.setState({ isModalOpen: false });
          }}
          items={this.state.value}
        />
      </>
    );
  }
}
export default LoaderExampleText;

它会起作用；

尝试在渲染之外渲染弹出窗口：React Js

Trying to render a Pop up outside of render: React Js

javascript

setstate

reactjs

semantic-ui

semantic-ui-react