Обновление страницы без перезагрузки?

Question

[Wood Walker]

Суть вопроса в заголовке, как сделать чтобы добавление элементов происходило без перезагрузки приложения. Т.е открывается модальное окно, вводятся данные, нажимается кнопка сохранить, происходит добавление на самой странице.
Ниже код страницы

Страница

import React, { Component } from 'react';
import '../../../public/bootstrap/css/bootstrap.min.css';
import { PageHeader, Table, Button} from 'react-bootstrap';
import Modals from './buttons/modal';
import Product_list from './product_container';

export default class Products extends Component {
    constructor(props) {
        super(props);
        this.state = {
            prod_list : []
        };
        this.delete_prod = this.delete_prod.bind(this);
        this.content = this.content.bind(this);
    }
    delete_prod() {
        const urll = '/api/products/{id}';
        fetch(urll, {
            method: 'delete'
        });
    }
    content() {
        if (this.state.prod_list.length === 0) {
            const prod = this.state.prod_list;
            const urll = 'api/products';
            fetch(urll)
                .then((response) => {
                response.json()
                    .then((data) => {
                    for (let i = 0; i < data.length; i++) {
                        prod.push({
                            id: data[i].id,
                            name: data[i].name,
                            price: data[i].price
                        });
                    }
                    this.setState({prod_list: prod});
                })
            });
        }
        else {
            const prod = this.state.prod_list;
            const urll = 'api/products';
            fetch(urll)
                .then((response) => {
                response.json()
                    .then((data) => {
                    if (data.length !== this.state.prod_list.length) {
                        prod.push({
                            id: data[length - 1].id,
                            name: data[length - 1].name,
                            price: data[length - 1].price
                        });
                        this.setState({prod_list: prod});
                    }
                })
            })
        }
    }
    componentDidMount() {
        this.content();
    };
    render () {

        return (
            <div>
                <div className='container'>
                    <PageHeader className="hd">
                        Product list
                        <Modals content={() => this.content()} />
                    </PageHeader>
                    <Table responsive>
                        <thead>
                        <tr>
                            <th>#</th>
                            <th>Name</th>
                            <th>Price</th>
                            <th>Options</th>
                        </tr>
                        </thead>
                        <Product_list  data = {this.state.prod_list}/>
                    </Table>
                </div>
            </div>
        )
    }
}
console.log(Products);

Код модалки

Модалка

import React, { Component } from 'react';
import { Button, Modal, Alert } from 'react-bootstrap';
import getUrl from './../../getUrl';
import Products from "./products";

export default class ModalEdit extends Component{
    constructor(props) {
        super(props);

        this.state = {
            showModal: false,
            prodSetting: {
                id:'',
                name:'',
                price:''
            },
            warning: 'none'
        };
       // let a=this.refs.child.content();
       // console.log(a);
        this.close = this.close.bind(this);
        this.open = this.open.bind(this);
        this.save = this.save.bind(this);
        this.deleteProd = this.deleteProd.bind(this);
    }

    deleteProd() {
        let content = {
            name: document.getElementById('name').value,
            price: document.getElementById('price').value
        };
        if ((content.name==='')&&(content.price==='')) {
            alert('hi');
            return null;
        }
        const urll=getUrl('',content);
        let id = this.state.prodSetting.id;
        console.log(id);
        fetch('api/products/'+id, {
            method: 'delete',
            headers: {
                "Content-type": "application/x-www-form-urlencoded;charset=UTF-8"
            },
            body: urll
        })
    }

    save() {
        let content = {
            name: document.getElementById('name').value,
            price: document.getElementById('price').value
        };
        console.log(content);
        if ((content.name==='')&&(content.price==='')) {
            alert('hi');
            return null;
        }
        const urll=getUrl('',content);
        let id = this.state.prodSetting.id;
        console.log(id);
        fetch('api/products/'+id, {
            method: 'put',
            headers: {
                "Content-type": "application/x-www-form-urlencoded;charset=UTF-8"
            },
            body: urll
        }).then((response) => {
            if (response.status === 200) {
                this.setState({ showModal: false });
                this.props.content();
            }
        }).catch(function(err) {
          //  if (err) this.setState({ warning: 'block' })
        });
    }

    close() {
        this.setState({ showModal: false });
        this.props.content();
    }

    open(e) {
        let id = e.target.parentElement.parentElement.parentElement.parentElement.dataset.id;
        fetch('/api/products/'+id)
            .then((response) =>{
            response.json()
                .then((data) =>{
                console.log(data);
                    this.setState({
                        showModal: true,
                        prodSetting: {
                            id: data.id,
                            name: data.name,
                            price: data.price
                        }
                    });
                    console.log(this.state);
                })
            })
    }
    render() {
        return (
            <div>
                <Button bsStyle="link" onClick={this.open}>edit</Button>
                <Modal show={this.state.showModal} onHide={this.close}>
                    <Modal.Header closeButton>
                        <Modal.Title>Edit products</Modal.Title>
                    </Modal.Header>
                    <Modal.Body>
                        <form className="form-inline" name="form1">
                            <div className="form-group" style={{marginRight:30+'px'}}>
                                <label htmlFor="name">Name</label>
                                <input defaultValue={this.state.prodSetting.name} type="text" className="form-control" id="name" />
                            </div>
                            <div className="form-group">
                                <label htmlFor="price">Price</label>
                                <input defaultValue={this.state.prodSetting.price} type="text" className="form-control" id="price"/>
                            </div>
                        </form>
                        <Alert style={{display: this.state.warning}} bsStyle="danger">
                            <h4>Oh snap! You got an error!</h4>
                            <p>try again</p>
                        </Alert>
                    </Modal.Body>
                    <Modal.Footer>
                        <Button bsStyle="primary" onClick={this.save} type="submit">Save</Button>
                        <Button onClick={this.close}>Close</Button>
                    </Modal.Footer>
                </Modal>
            </div>
        );
    }
}

Answer 1

[Arkadiy Parinov]

Вставьте e.preventDefault(); в самое начало метода save и измените бинд onClick на

<Button bsStyle="primary" onClick={(e) => this.save(e)} type="submit">Save</Button>

Comments

[Wood Walker]

Сделал так

save(e) {
        e.preventDefault();
        let content = {
            name: document.getElementById('name').value,
            price: document.getElementById('price').value
        };
...
}

Убрал байнд с save, и сделал так

<Button bsStyle="primary" onClick={(e) => this.save(e)} type="submit">Save</Button>

Но все равно не сработало