Question

我有一个react应用程序，该应用程序创建一个小部件布局，在其中可以添加和删除4个网格中的小部件。目前在addEvent中，我默认将其添加“ DataTable”组件。相反，我希望它打开一个稍后可以从“ DataTable”或“ CheckboxList”组件以及更大的组件列表中选择的模式。我是新来的反应者，不确定要如何实现这一点，任何帮助都将是很大的。

import React, { Component } from 'react';
import Swappable from './components/SwappableComponent'
import './App.css';
import DataTable from './components/tableWidget';
import CheckboxList from './components/CheckboxList';
import PropTypes from "prop-types";
import { withStyles } from "@material-ui/core/styles";
import Paper from "@material-ui/core/Paper";
import Grid from "@material-ui/core/Grid";



const styles = theme => ({
  root: {
    flexGrow: 1
  },
  paper: {
    padding: theme.spacing.unit * 2,
    textAlign: "center",
    color: theme.palette.text.secondary
  }
});

class App extends Component {
    constructor(props) {
      super(props);
      this.state={
        widgets:[
          {id:1, content: <DataTable/>},
          {id:2, content: <CheckboxList/>},
          {id:3, content: ""},
          {id:4, content: ""}
        ]
      }

    }  
    deleteEvent=(index)=>{
        const copyWidgets=Object.assign([],this.state.widgets);
        let widget=this.state.widgets[index];
        widget.content="";
        copyWidgets[index]=widget;
        this.setState({
            widgets:copyWidgets
        })
    }
    addEvent=(index)=>{
        const copyWidgets=Object.assign([],this.state.widgets);
        let widget=this.state.widgets[index];
        widget.content=<DataTable/>;
        copyWidgets[index]=widget;
        this.setState({
            widgets:copyWidgets
        })
    }
    render() {
      const { classes } = this.props;

      return (
      <div className={classes.root}>
        <Grid container spacing={24}>
            {
                this.state.widgets.map((widget,index)=>{
                    return(
                        <Grid item xs={12} sm={6}>
                            <Paper className={classes.paper}><Swappable id={widget.id} content={widget.content} delete={this.deleteEvent.bind(this,index)} add={this.addEvent.bind(this,index)}/></Paper>
                         </Grid>
                    )
                })
            }
        </Grid>
      </div>
      );
    }
  }

  App.propTypes = {
    classes: PropTypes.object.isRequired
  };

  export default withStyles(styles)(App);

Answer 1

模态组件的基础如下。您可以添加页眉和页脚部分，淡入效果，背景不透明等-发疯

class Modal extends React.Component {

  render() {
    const { display, close, children } = this.props;
    if (!display) return null;
    return (
      <div className="modal">
        {children}
        <button onClick={close}>Close</button>
      </div>
      )
  }
}

// css

.modal {
  position: fixed;
  top: 10%;
  width: 90%;
  height: 90%;
 }
 
 // use it
 <Modal display={this.state.displayModal}
  close={()=>this.setState({displayModal: false})} >
   // add your modal content here
   <h1>Add Event</h1>
   <p>Some relevant jsx here</p>
 </Modal>

要启动模式，只需将displayModal设置为true：

addEvent = () => {
  this.setState({displayModal:true});
}

如何打开模式以允许用户选择要添加的组件？

1 个答案: