我想在我的表上添加编辑按钮，并打开模型上的表单，当点击演示模态按钮？

问题描述 投票：0回答：1

大家好，我想添加编辑功能到我的项目，但我不明白我怎么能添加，所以你能不能帮我，我想打开我的表格上的模态上的按钮点击 "当他们点击按钮的模态将打开的形式""当点击编辑按钮再次模态将打开与预定义的值，当我编辑的字段的表将更新 "这里是我的代码。

应用程序.js

import React, { Component } from "react";
//import ReactDOM from "react-dom";
import Form from "./Form";
//import Modal from 'react-modal';
import { makeStyles } from '@material-ui/core/styles';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableContainer from '@material-ui/core/TableContainer';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';
import Button from '@material-ui/core/Button';

import "./styles.css";



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

    this.state = {
      people: []
    };

    this.addPerson = this.addPerson.bind(this);
    this.deletePerson = this.deletePerson.bind(this);
  }

  addPerson(name, email, phone) {
    this.setState(prevState => ({
      people: [...prevState.people, { name, email, phone }]
    }));
  }

  componentDidMount() {
    this.getPeople();
  }

  getPeople() {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then(response => response.json())
      .then(response => this.setState({ people: response }))
      .catch(error => console.log(error));
  }

  deletePerson(email) {
    return () => {
      this.setState(prevState => ({
        people: prevState.people.filter(person => person.email !== email)
      }));
    };
  }

  editPerson(email) {
    return () => {
      this.setState({email})
    }
  }

  render() {
    console.log(this.state);

    return (
      <div className="App">
        <Form addPerson={this.addPerson} />
        <TableContainer component={Paper}>
          <TableHead>
            <TableRow>
              <TableCell>LP</TableCell>
              <TableCell>USER</TableCell>
              <TableCell>EMAIL</TableCell>
              <TableCell>Phone</TableCell>
              <TableCell>Actions</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {this.state.people.map((person, index) => {
              return (
                <TableRow key={person.email}>
                  <TableCell>{index + 1}</TableCell>
                  <TableCell>{person.name}</TableCell>
                  <TableCell>{person.email}</TableCell>
                  <TableCell>{person.phone}</TableCell>
                  <TableCell>
                  <Button variant="contained" color="secondary" onClick={this.editPerson(person.email)}>
                      Edit
                    </Button>
                  </TableCell>
                  <TableCell>
                    <Button variant="contained" color="secondary" onClick={this.deletePerson(person.email)}>
                      Delete
                    </Button>
                  </TableCell>
                </TableRow>
              );
            })}
          </TableBody>
        </TableContainer>
      </div>
    );
  }
}

export default App;

表单.js

import React, { Component, useState } from "react";
import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button';
import Modal from './Modal'

const validEmailRegex = RegExp(
  /^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i
);
class Form extends Component {
  constructor() {
    super();
    this.formSubmit = this.formSubmit.bind(this);
    this.state = {
      name: null,
      email: null,
      phone: null,
      errors: {
        name: '',
        email: '',
        phone: '',
      }
    };
  }

  handleChange = (event) => {
    event.preventDefault();
    const { name, value } = event.target;
    let errors = this.state.errors;

    switch (name) {
      case 'name':
        errors.name =
          value.length < 5
            ? 'Name must be 5 characters long!'
            : '';
        break;
      case 'email':
        errors.email =
          validEmailRegex.test(value)
            ? ''
            : 'Email is not valid!';
        break;
      case 'phone':
        errors.phone =
          value.length < 8
            ? 'Password must be 8 characters long!'
            : '';
        break;
      default:
        break;
    }

    this.setState({ errors, [name]: value }, () => {
      console.log(errors)
    })
  }

  formSubmit(event) {
    event.preventDefault();
    const form = event.target;
    const email = form.elements["email"].value;
    const name = form.elements["name"].value;
    const phone = form.elements["phone"].value;
    this.props.addPerson(name, email, phone);
    form.reset();
  }

  state = { show: false };

  showModal = () => {
    this.setState({ show: true });
  };

  hideModal = () => {
    this.setState({ show: false });
  };

  render() {

    return (
      <div>
        <Modal />
        <form onSubmit={this.formSubmit}>

          <TextField onChange={this.handleChange} id="name" type="text" defaultValue="" placeholder="Name..." />
          <br />
          <TextField onChange={this.handleChange} id="email" type="text" defaultValue="" placeholder="Email..." />
          <br />
          <TextField onChange={this.handleChange} id="phone" type="number" defaultValue="" placeholder="Phone Number" />
          <br />
          <br />
          <Button type="submit" value="submit" variant="contained" color="primary" onSubmit={this.handleChange}> Submit </Button>

        </form>

      </div>
    );

  }

}



export default Form;

模态.js

import React, { useState } from 'react';
import { Modal } from 'react-bootstrap';
import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';

function Example() {
    const [show, setShow] = useState(false);

    const handleClose = () => setShow(false);
    const handleShow = () => setShow(true);

    return (
        <>
            <Button variant="contained" color="primary" onClick={handleShow}>
                Demo modal
            </Button>

            <Modal show={show} onHide={handleClose}>
                <Modal.Body closeButton>
                    Form

                </Modal.Body>
                <Modal.Footer>
                    <Button variant="contained" color="secondary" onClick={handleClose}>
                        Close
                     </Button>
                    <Button variant="contained" color="primary" onClick={handleClose}>
                        Save Changes
            </Button>
                </Modal.Footer>
            </Modal>
        </>
    );
}


export default Example;
javascript reactjs modal-dialog
1个回答
0
投票

你想打开模态，而模态里面有一个表单，对吧，所以你要导入的是 Modal.js 卷入 App.js那样 import Modal from ./Modal.js

  1. 并在初始状态内添加 
this.state = {
    people: [],
    showModal: false
};
  1. 在Modal中创建一个在按下关闭按钮时关闭模型的功能。
const handleClose = () =>  this.setState({showModal: false})
  1. 并在这一行下使用组件 <div className="App">

你会写。

<Modal show={this.state.showModal} email={this.state.email} close={this.handleClose}/>
  1. 在这个函数中 editPerson 你必须在写这段代码时，不需要 return写。
this.setState({email, showModal: true})

然后你就会打开 Model.js 文件，并从 Form.js 文件，并修改这一行

<Modal show={show} onHide={handleClose}>

改成这个。

<Modal show={props.show} onHide={props.handleClose}>

是的，在我忘记之前，你应该改变这个功能（组件）。

function Example() 领取道具，这样就可以 

function Example(props) {
    ...
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.