ReactJS

Question

我正在尝试使用 React 创建一个简单的模态表单。我取得了这样的成就：

Index.js

import React from "react";
import ReactDOM from "react-dom";
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import Modal from "./components/Modal";

import "./styles.css";

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      modal1: false,
      modal2: false,
      name: "",
      modalInputName: ""
    };
  }

  handleChange(e) {
    const target = e.target;
    const name = target.name;
    const value = target.value;

    this.setState({
      [name]: value
    });
  }

  handleSubmit(e) {
    this.setState({ name: this.state.modalInputName });
    this.modalClose();
    this.modal2Close();
  }

  modalOpen() {
    this.setState({ modal1: true });
  }

  modalClose() {
    this.setState({
      modalInputName: "",
      modal1: false
    });
  }

  modal2Open() {
    this.setState({ modal2: true });
  }

  modal2Close() {
    this.setState({
      modalInputName: "",
      modal2: false
    });
  }

  render() {
    return (
      <div className="App">
        <h1>Hello!! {this.state.name}</h1>
        <a href="javascript:;" onClick={(e) => this.modalOpen(e)}>
          Open Modal
        </a>
        <Modal show={this.state.modal1} handleClose={(e) => this.modalClose(e)}>
          <h2>Hello Modal</h2>
          <div className="form-group">
            <label>Enter Name:</label>
            <input
              type="text"
              value={this.state.modalInputName}
              name="modalInputName"
              onChange={(e) => this.handleChange(e)}
              className="form-control"
            />
          </div>
          <div className="form-group">
            <button
              onClick={(e) => {
                this.handleSubmit(e);
                this.modal2Open(e);
              }}
              type="button"
            >
              Save
            </button>
            <Modal
              show={this.state.modal2}
              handleClose={(e) => this.modal2Close(e)}
            >
              <h2>Modal 2 - Confirmation</h2>
            </Modal>
          </div>
        </Modal>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

当我从模式中单击 'save' 按钮时，它应该保存并在另一个模式中显示感谢 you/confirmation 消息。

这种情况下如何处理多模态？我可以通过修改 Modal.js 来实现吗？有人可以指导我如何在共享示例中实现它吗？

Answer 1

实际上，您的代码中只有一个模态。要通过单击“保存”按钮显示另一个模态框，您可以采用与单击“打开模态框”时显示“Hello Modal”模态框相同的方式实现。

您将需要两个独立的状态来处理两个独立的模态框。

Answer 2

您可以根据需要创建任意数量的模态框并show/hide设置适当的状态。例如：

...
<Modal show={this.state.shouldShowInputModal} ...>
modal content
</Modal>
<Modal show={this.state.shouldShowConfirmationModal} ...>
confirmation modal content
</Modal>
...

Answer 3

现在输入名称并单击保存，将关闭 Modal1 并打开 Modal2。如果您正在寻找模态上方的模态，这可能没有用。如果这没有帮助，您可以在 Google 中搜索类似 Modal above modal 的内容。

import React from "react";
import ReactDOM from "react-dom";
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import Modal from "./components/Modal";

import "./styles.css";

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      modal1: false,
      modal2: false,
      name: "",
      modalInputName: ""
    };
  }

  handleChange(e) {
    const target = e.target;
    const name = target.name;
    const value = target.value;

    this.setState({
      [name]: value
    });
  }

  handleSubmit(e) {
    this.setState({ name: this.state.modalInputName });
    this.modalClose();
    this.modal2Close();
  }

  modalOpen() {
    this.setState({ modal1: true });
  }

  modalClose() {
    this.setState({
      modalInputName: "",
      modal1: false
    });
  }

  modal2Open() {
    this.setState({ modal2: true });
  }

  modal2Close() {
    this.setState({
      modalInputName: "",
      modal2: false
    });
  }

  render() {
    return (
      <div className="App">
        <h1>Hello!! {this.state.name}</h1>
        <a href="javascript:;" onClick={(e) => this.modalOpen(e)}>
          Open Modal
        </a>
        <Modal show={this.state.modal1} handleClose={(e) => this.modalClose(e)}>
          <h2>Hello Modal</h2>
          <div className="form-group">
            <label>Enter Name:</label>
            <input
              type="text"
              value={this.state.modalInputName}
              name="modalInputName"
              onChange={(e) => this.handleChange(e)}
              className="form-control"
            />
          </div>
          <div className="form-group">
            <button
              onClick={(e) => {
                this.handleSubmit(e);
                this.modal2Open(e);
              }}
              type="button"
            >
              Save
            </button>
          </div>
        </Modal>
        <Modal
          show={this.state.modal2}
          handleClose={(e) => this.modal2Close(e)}
        >
          <h2>Modal 2 - Confirmation</h2>
        </Modal>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 4

与其使用 2 个嵌套模态框，不如只使用一个带有两个子屏幕的模态框，您可以通过状态在它们之间导航？

import React from "react";
import ReactDOM from "react-dom";
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import Modal from "./components/Modal";

import "./styles.css";

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      modal: false,
      modalScreen: 0,
      name: "",
      modalInputName: ""
    };
  }

  handleChange = (e) => {
    const { name, value } = e.target;
    this.setState({
      [name]: value
    });
  };

  handleSubmit = () => {
    this.setState({ name: this.state.modalInputName, modalScreen: 1 });
  };

  modalOpen = () => {
    this.setState({ modal: true });
  };

  modalClose = () => {
    this.setState({
      modalInputName: "",
      modal: false,
      modalScreen: 0
    });
  };

  render() {
    const { name, modal, modalScreen } = this.state;
    return (
      <div className="App">
        <h1>Hello!! {name}</h1>
        <button onClick={this.modalOpen}>Open Modal</button>
        <Modal show={modal} handleClose={(e) => this.modalClose(e)}>
          {modalScreen === 0 && (
            <>
              <h2>Hello Modal</h2>
              <div className="form-group">
                <label>Enter Name:</label>
                <input
                  type="text"
                  value={this.state.modalInputName}
                  name="modalInputName"
                  onChange={(e) => this.handleChange(e)}
                  className="form-control"
                />
              </div>
              <div className="form-group">
                <button onClick={this.handleSubmit} type="button">
                  Save
                </button>
              </div>
            </>
          )}
          {modalScreen === 1 && (
            <>
              <h2>Modal 2 - Confirmation</h2>
            </>
          )}
        </Modal>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

ReactJS - 多模态

ReactJS - Multiple modals

react-native

react-modal