如何使用React JS从选项值编辑数据

Question

//编辑数据

DialogTitle组件

const DialogTitle = withStyles(theme => ({
  root: {
    borderBottom: "1px solid #007bff",
    margin: 0,
    padding: 10
  },
  closeButton: {
    position: "absolute",
    right: 5,
    top: 5,
    color: "#007bff"
  }
}))(props => {
  const { children, classes, onClose } = props;
  return (
    <MuiDialogTitle disableTypography className={classes.root}>
      <span
        className="avenir-black-primary ml-4 mb-0"
        style={{ fontSize: "24px" }}
      >
        {children}
      </span>
      {onClose ? (
        <IconButton
          aria-label="Close"
          className={classes.closeButton}
          onClick={onClose}
        >
          <CloseIcon />
        </IconButton>
      ) : null}
    </MuiDialogTitle>
  );
});

Ticket_Moveto组件

export default class Ticket_Moveto extends Component {
  constructor(props) {
    super(props);
    this.state = {
      project: "",
      project_id: "",

      detailTicket: null
    };
  }

  handleChange = e => {
    const target = e.target;
    const value = target.type === "checkbox" ? target.checked : target.value;
    const name = target.name;
    if (name == "project") {
      console.log("target", target.value);
      Promise.all([
        fetch(`api/v1/ticket/getdetailuserprojek/${target.value}`),
        fetch("api/v1/projects/filters")
      ])
        .then(([ticketsResp, filtersResp]) => {
          return Promise.all([ticketsResp.json(), filtersResp.json()]);
        })
        .then(([tickets, filters]) => {
          this.setState({ listUser: tickets.user });
        })
        .catch(error => console.log(error));
    }
    this.setState({
      [name]: value
    });
  };

  async componentDidMount() {
    Promise.all([fetch("api/v1/ticket/data"), fetch("api/v1/projects/filters")])
      .then(([ticketsResp, filtersResp]) => {
        return Promise.all([ticketsResp.json(), filtersResp.json()]);
      })
      .then(([tickets, filters]) => {
        this.setState({
          listProjectName: tickets.projek,

          filters
        });
        console.log(
          "tickets : ",
          tickets.projek,
          "departments : ",
          tickets.depart,
          "types: ",
          tickets.tipe,
          "Status: ",
          tickets.status,
          "createBy: ",
          tickets.cb
        );
      })
      .catch(error => console.log(error));
  }

  onSubmit = async e => {
    const { detailTicket } = this.state;
    e.preventDefault();
    await this.setState({ response: null });

    var form = {
      Project: detailTicket.project_id
    };
  };

  handleClose = (event, reason) => {
    if (reason === "clickaway") {
      return;
    }
    this.setState({ open: false });
  };

  handleMultiChange = name => async value => {
    await this.setState({
      [name]: value
    });
  };

  async componentWillReceiveProps(nextProps) {
    const detailTicket = await nextProps.detailTicket;
    console.log("detailTicketProps", nextProps.detailTicket);
    if (detailTicket !== null || detailTicket !== undefined) {
      this.setState({ detailTicket });

      await Promise.all([
        fetch(
          `api/v1/ticket/getdetailuserproject/${
            this.state.detailTicket.project_id
          }`
        )
      ])
        .then(([ticketsResp]) => {
          return Promise.all([ticketsResp.json()]);
        })
        .then(([tickets]) => {
          this.setState({ listUser: tickets.user });
        })
        .catch(error => console.log(error));

      console.log(this.state.detailTicket);
    } else {
      return "No data";
    }
  }

  render() {
    const { isDialogOpen, handleDialogClose, classes, onClose } = this.props;
    const {
      listProjectName,
      listDepartment,
      listType,
      listStatus,
      listCreatedBy,
      listUser,
      detailTicket
    } = this.state;
    return (
      <>
        {this.state.detailTicket ? (
          <>
            <Dialog
              open={isDialogOpen}
              onClose={handleDialogClose}
              fullWidth={true}
              maxWidth="md"
            >
              <DialogTitle onClose={handleDialogClose}>Edit Ticket</DialogTitle>
              <DialogContent>
                <AvForm onSubmit={e => this.onSubmit(e)}>
                  <Row
                    style={{ margin: "1.5rem 3rem" }}
                    className="new-tasks-dialog"
                  >
                    <Col md="6">
                      <AvGroup>
                        <Label className="avenir-black-primary">
                          Project Name
                        </Label>
                        <AvInput
                          value={
                            this.state.project === "" ||
                            this.state.project === null
                              ? detailTicket.project_id
                              : this.state.project
                          }
                          onChange={e => this.handleChange(e)}
                          type="select"
                          name="project"
                          id="user-project"
                        >
                          <option value="">Select Project</option>
                          {listProjectName.map(project => (
                            <option value={project.id}>{project.name}</option>
                          ))}
                        </AvInput>
                        <AvFeedback>Select Project Required</AvFeedback>
                      </AvGroup>

                      <Button
                        color="primary"
                        className="px-4"
                        style={{
                          fontSize: 12,
                          marginright: 10,
                          marginTop: "10%"
                        }}
                      >
                        Move To
                      </Button>
                    </Col>
                  </Row>
                </AvForm>
              </DialogContent>
            </Dialog>
          </>
        ) : (
          <div />
        )}
      </>
    );
  }
}