当我在React中按下按钮时，如何使其仅显示特定的模态？

debugcn 发表于 Dev

约阿希姆

当前正在尝试在React中制作模态，并且想要创建一个网格，其中“按钮1”显示“模态1”，“按钮2”显示“模态2”等。当我按下按钮以显示模态时，它同时显示了模式1和模式2。如何设置按钮1仅打开模式1？

这是我的App.js：

import React from 'react';
import './main.css';
import Modal from './components/Modal/modal';

class App extends React.Component {
  state = {
    show: false
  };

  showModal = x => {
    this.setState({
      show: !this.state.show
    });
  };

  render() {
    return (
      <div>
        <div className="button-container">
          <button className="toggle-button" onClick={x => {
            this.showModal(x);
          }}>Show yourself Modal!</button>
        </div>
        <Modal onClose={this.showModal} show={this.state.show} title="Test modal 1" id="1">Lorem ipsum</Modal>
        <Modal onClose={this.showModal} show={this.state.show} title="Test modal 2" id="2">I am a different modal</Modal>
      </div>
    );
  }
}

export default App;

这是我的modal.js组件：

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import './modal.css';

export default class Modal extends Component {
    onClose = x => {
        this.props.onClose && this.props.onClose(x);
    };

    render() {
        if(!this.props.show) {
            return null;
        }

        return (
            <div className="modal-wrapper">
                <h2 className="modal-header">{this.props.title}</h2>
                <div>{this.props.children}</div>
                <div>
                    <button className="modal-close" onClick={this.onClose}></button>
                </div>
            </div>
        )
    }
}

Modal.propTypes = {
    onClose: PropTypes.func.isRequired,
    show: PropTypes.bool.isRequired
};

布赖恩·汤普森

最简单的方法是在状态中添加第二个键，这样您就可以独立管理两个模式。

class App extends React.Component {
  state = {
    show1: false,
    show2: false
  };

然后，将您的change函数变成一个咖喱函数，接受一个参数来更新状态的正确部分。为了使用变量访问对象键，我们需要将其作为数组访问，如下所示：

  showModal = (modal) => (e) => {
    this.setState({
      [modal]: !this.state[modal]
    });
  };

然后像这样使用它：

  render() {
    return (
      <div>
        <div className="button-container">
          <button className="toggle-button" onClick={this.showModal('show1')}>Show yourself Modal 1!</button>
          <button className="toggle-button" onClick={this.showModal('show2')}>Show yourself Modal 2!</button>
        </div>
        <Modal onClose={this.showModal('show1')} show={this.state.show1} title="Test modal 1" id="1">Lorem ipsum</Modal>
        <Modal onClose={this.showModal('show2')} show={this.state.show2} title="Test modal 2" id="2">I am a different modal</Modal>
      </div>
    );
  }
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。