Блог

Проблемы новичков: Создавая корзину покупок, у меня есть форма в модальном режиме.
Кнопка отправки является модальной (вне тегов формы), но, похоже, отправляет форму обработчику handleOnSubmit. Однако, помимо закрытия модального, я не могу обновить значения состояния productBought и ProductName.
В идеале я хотел бы переместить содержимое корзины [] (из класса InputList) в новый массив в родительском (AsyncAwaitLocalhost), после чего я могу отправить всю покупку в API.
ссылки устарели, и различные другие способы обмена данными меня подводят. Мои проблемы заключаются в следующем:
(i) Как я могу передать объект push the basket ожидающему объекту родительского состояния? и (ii) Как я могу отправить форму после регистрации объектов формы в консоли?
Спасибо.

AsyncAwaitLocalhost.jsx

 import React from 'react'
import "./App.css"
import { Modal, Button } from "react-bootstrap"
import Form from "./Form.jsx"

class AsyncAwaitLocalhost extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            sharedVar: "init",
            jsonContent: [],
            isOpen: null,
            productBought: 0,
            productName: "anItem"

        }
        this.handleOnSubmit = this.handleOnSubmit.bind(this)
    }

    updateShared(shared_value) {
        this.setState({ sharedVar: shared_value });
    }

    async componentDidMount() {
        // GET request using fetch with async/await
        const response = await fetch('http://localhost:8080/cakes');
        const data = await response.json();
        this.setState({ jsonContent: data.cakes, greeting: this.state.greeting, newGreeting: this.state.newGreeting })
    }

    openModal = (index) => () => this.setState({ isOpen: index });

    closeModal = () => this.setState({ isOpen: null });

    handleCloseModal() {
        this.setState({ isOpen: null });
    }

    handleOnSubmit(event) {
        event.preventDefault()
        this.setState({ productBought: event.target.name.value })
        this.setState({ productName: event.target.name.value })
        console.log("Inside handleOnSubmit: "   this.state.productBought)
        this.handleCloseModal();
    }

    render() {

        const { jsonContent } = this.state;
        const { sharedVar } = this.state;
        const { productBought } = this.state;
        const { productName } = this.state;
        console.log("shared var in parent: "   sharedVar)
        console.log("productBought in parent: "   productBought)

        const Cake = ({ name, id, text, image, comment, price, dbutton, dmodal }) => (
            <div className="rounded-well">
                <div>
                    <img src={image} width="120px" alt={name} />
                </div>
                <div>
                    <p>{name}</p>
                    <p>{text}</p>
                    <p>{comment}</p>
                    <p>{id}</p>
                    <p>{price}</p>
                    <div> {this.state.sharedVar}</div>
                    <div>{dbutton}</div>
                    <div id="dModal" className="dModalClosed">{dmodal}</div>
                </div>
            </div>
        );

        return (
            <div className="card text-center m-3">
                Showing HTTP Requests, CSS , Data Transfer amp;amp; Modals
                <h5 className="card-header">See Cakes</h5>
                <div className="card-body">
                    <div>
                        {this.state.jsonContent.map((cake, index) => (
                            <Cake
                                image={cake.image}
                                text={cake.text}
                                key={index}
                                price={"£"   cake.price   ".00"}
                                dbutton={<Button onClick={this.openModal(index)}>See more</Button>}
                                dmodal={
                                    <Modal id={cake.name} show={this.state.isOpen === index}
                                        onHide={this.closeModal} className="image-container">
                                        <Modal.Header closeButton>
                                            <Modal.Title>{cake.text}</Modal.Title>
                                        </Modal.Header>
                                        <Modal.Body>
                                            <div>
                                                <img src={cake.image} width="300px" alt={cake.name} />
                                            </div>
                                            <br />
                                            <p>{cake.text}</p>
                                            <p>{cake.comment}</p>
                                            <div>
                                                <form id={cake.name} method="POST" action="#" onSubmit={this.handleOnSubmit} >
                                                    {<Form dataFromParent={this.state.jsonContent[index]} onChange />}
                                                </form>
                                            </div>
                                        </Modal.Body>
                                        <Modal.Footer>
                                            <Button variant="primary" onClick={this.closeModal}>
                                                Cancel
                                            </Button>
                                            <Button form={cake.name} type="submit" variant="secondary" onClick={this.handleOnSubmit}>
                                                Add to basket
                                            </Button>
                                        </Modal.Footer>
                                    </Modal>
                                }
                            />
                        ))}
                        <div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

export { AsyncAwaitLocalhost };
 

Form.jsx

 import React from 'react';
class InputList extends React.Component {

  constructor(props) {
    super(props)
    this.state = {     
      bought: 0,
      sharedVar: "input field",
      cakeItems:{},
      basket: [],
      input: 0,
      item: ""
    }
  }

    handleChange(index, e) {
      const value = e.target.value
      this.props.onChange(index, {...this.props.data[index], buy: value})
      this.state.bought = value
      this.state.cakeItems = {item: this.props.data[0].name, number: this.state.bought}
      this.state.basket.push(this.state.cakeItems)
    }
    
    render() { 

      const { bought } = this.state;
      const {cakeItems}  = this.state;
      const {basket}  = this.state;
      const { sharedVar } = this.state;
      const { item } = this.state;
      // this.state.sharedVar = this.props.dataFromParent[0].name
      console.log("pre-bought: "   bought);
      console.log("Shared var in input class: "   sharedVar);
      console.log("basket in InputClass: "   JSON.stringify(basket))
      return (
        <div>
          

            Buy: amp;nbsp;
            {this.props.data.map((d, i) => <input key="0" value={d.buy} name="productBought" onChange={this.handleChange.bind(this, i)} />)}
            {this.props.data.map((d, i) => <input key="1" type="hidden" value={d.name} name="productName" />)}
            
            <>
              amp;nbsp; To buy: {bought}
            </>
            
        
        </div>
        
      )
    }
  }
  
  class Form extends React.Component {
    constructor(props) {
      super(props)
      this.state = {
        data: [],
        basket: [],
        sharedVar: "form field",
        usrBasket: {
          buy: 1,
          id: "randomStr",
          items: [{buy: 1, item: ""}],
          value_key: "",
          nuArry: []
        },
        input: {}
      }
    }

    loadStuff() {
      this.setState({
        data: [this.props.dataFromParent]
      })
        // console.log('got some stuff from the server in Form: '   JSON.stringify(this.props.dataFromParent))
    }
    
    handleChange(index, value) {
      console.log('data changed!', value)
      const data = [...this.state.data]
      data.splice(index, 1, value)
      this.setState({
        data, 
      })
      
      this.state.basket = this.state.cakeItems
      console.log("basket in FormClass: "   JSON.stringify(this.state.basket))
    }
    componentDidMount() {
      this.loadStuff()
    }
    render() {

      const {basket}  = this.state;
      const { value_key } = this.state;
      this.state.value_key = "new vk";
      console.log("value_key in Form: "   value_key);

      const { sharedVar } = this.state;
      this.state.sharedVar = "Hello greeting";
      console.log("sharedVar in Form: "   sharedVar); 
      
      return (
        <div>
              <InputList data={this.state.data} onChange={this.handleChange.bind(this)} />
        </div>
      );
    
    }
  }

export default Form```

<br>
 

Хаа, жизнь новичка…!

Таким образом, после более тщательного изучения и лучшего изучения всей структуры решение таково.

(i) Как я могу поделиться объектом push the basket с объектом ожидающего родительского состояния?

• Создавайте классы (некоторые люди выступают за функциональные компоненты), которые отличаются друг от друга и хорошо выполняют одну вещь. Компонент формы отображает модальный, собирает значения формы и отправляет эти значения родителю с помощью реквизитов.

В родительском, приготовьтесь к приему реквизита для детей

<Cakes onSubmitChild={this.getFormValues} />

Затем отправьте значения родительскому компоненту из дочернего компонента следующим образом:

this.props.onSubmitChild(this.state.productField)

(ii) Как я могу отправить форму после регистрации объектов формы в консоли? У родителя есть кнопка отправить на сервер. После того, как Ребенок отправил значения формы Родителю, остается создать объект JSON и отправить его на сервер с помощью AJAX (или того, что предпочитает кодировщик). Обратите внимание, что для решения этой проблемы на стороне сервера возникнут проблемы с CORS, но я рекомендую библиотеку cors в npm.