时间戳

首页 > 解决方案 > 如何将元素绑定到 React 中的模态？

javascript - 如何将元素绑定到 React 中的模态？

问题描述

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

编辑.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;

这就是卡片的样子

仪表板卡看起来像

当我点击编辑按钮时，它看起来像这样

编辑卡看起来像

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

任何帮助表示赞赏。

参考：参考链接

标签： javascriptreactjs

解决方案

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

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

创建this.state.item（里面有你的值/属性？）

如果你不想改变一切，这可能会解决它：

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

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

推荐阅读