Question

我正在使用无服务器的dynamodb渲染元素，并显示在卡片仪表板中，当我编辑卡片时，我想查看卡片中已经存在的内容。

Edit.js

import React, { Component } from "react";
import { Form, Modal, Button, Container, Icon } from "semantic-ui-react";
import Amplify, { API } from "aws-amplify";
const uuidv1 = require("uuid/v1");

class EditItemModal extends Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.deleteItem = this.deleteItem.bind(this);
    this.state = { item: this.props.item };
  }

  deleteItem() {
    let apiName = "ServerlessReactExampleCRUD";
    let path = "/ServerlessReactExample/object/" + this.props.item[0].ID;
    API.del(apiName, path)
      .then(response => {
        console.log(response);
      })
      .catch(error => {
        console.log(error.response);
      });
    this.props.getItems();
    this.handleClose();
  }

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

  handleSubmit(event) {
    let apiName = "ServerlessReactExampleCRUD";
    let path = "/ServerlessReactExample";
    let editItem = {
      body: {
        ID: this.props.item[0].ID,
        name: this.state.name,
        price: this.state.price,
        description: this.state.description
      }
    };
    API.put(apiName, path, editItem)
      .then(response => {
        console.log(response);
      })
      .catch(error => {
        console.log(error.response);
      });
    this.props.getItems();
    this.handleClose();
    event.preventDefault();
  }

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

  handleClose = () => this.setState({ modalOpen: false });

  render() {
    return (
      <Container style={{ padding: 10 }}>
        <Modal
          trigger={
            <Button icon onClick={this.handleOpen}>
              <Icon name="edit" />
            </Button>
          }
          open={this.state.modalOpen}
          closeIcon
          onClose={this.handleClose}
        >
          <Modal.Header>Edit</Modal.Header>
          <Modal.Content>
            <Form onSubmit={this.handleSubmit}>
              <Form.Group unstackable widths={2}>
                <Form.Input
                  name="name"
                  label="Item Name"
                  placeholder="Edit Item Name..."
                  onChange={this.handleChange}
                  value={this.state.name}
                />
                <Form.Input
                  name="price"
                  label="Item Price"
                  placeholder="£0.00"
                  onChange={this.handleChange}
                  value={this.state.price}
                />
              </Form.Group>
              <Form.TextArea
                name="description"
                label="Item Description"
                placeholder="Edit Description of the Item..."
                onChange={this.handleChange}
                value={this.state.description}
              />
              <Form.Button type="submit">Submit</Form.Button>
            </Form>
          </Modal.Content>
          <Modal.Actions>
            <Button icon labelPosition="left" onClick={this.deleteItem}>
              <Icon name="delete" />
              Delete Item
            </Button>
          </Modal.Actions>
        </Modal>
      </Container>
    );
  }
}

export default EditItemModal;

这是卡片的外观

当我单击“编辑”按钮时，它将看起来像这样

我要显示卡中存在的值？我想知道如何绑定它们以显示在卡片中？

感谢您的帮助。

Ref：Ref links

Answer 1

如Simão所写，您可能访问了错误的元素

this.state = { item: this.props.item };

创建this.state.item（将您的值/属性包含在其中？）

如果您不想更改所有内容，则可能会解决此问题：

this.state = { ...this.props.item };

我会将操作移到父级以将所有（CRUD）保留在一个位置。在处理程序中更新/删除列表中的项目可以避免不必要的列表重新加载（getItems），并且可以在api调用作为乐观更新之前完成。

如何在React中将元素绑定到模态？

1 个答案: