表单输入元素与反应页面的 URL 混淆

Question

ContactData.js

import React, { Component } from 'react';
import Button from '../../../components/UI/Button/Button';
import classes from './ContactData.module.css'
class ContactData extends Component {
    state = {
        name: '',
        age: '',
        address: {
            street: '',
            postalCode: ''
        }
    }

    orderHandler = () => {
        console.log(this.props.ingredients)
    }

    render() {
        console.log(this.props.ingredients);
        return (
            <div className={classes.ContactData}>
                <h4>Enter Your Contact Data</h4>
                <form>
                    <input type="text" name="name" placeholder="Your Name" />
                    <input type="email" name="email" placeholder="Your Mail" />
                    <input type="text" name="street" placeholder="Street" />
                    <input type="text" name="postal" placeholder="Postal Code" />
                    <Button btnType="Success" clicked={this.orderHandler}>ORDER</Button>
                </form>
            </div>
        );
    }
}

export default ContactData;

CheckOut.js

    import React from 'react';
import CheckoutSum from '../../components/Checkout/Checkout'
import { Route } from 'react-router-dom';
import ContactData from '../../container/Checkout/ContactData/ContactData'
class Checkout extends React.Component {
    state = {
        ingredients: {
            salad: 1,
            meat: 1,
            cheese: 1,
            bacon: 1
        }
    }

    componentDidMount() {
        const query = new URLSearchParams(this.props.location.search);
        const ingredients = {};
        for (let param of query.entries()) {
            ingredients[param[0]] = parseInt(param[1]);
        }
        // console.log(ingredients);
        this.setState({ ingredients: ingredients });

    }

    cancelHandle = () => {
        this.props.history.goBack();
    }

    continueHandle = () => {
        this.props.history.replace('/checkout/contact-data');
    }
    render() {
        console.log(this.props)
        console.log(this.state.ingredients)
        return (
            <div>
                <CheckoutSum
                    cancel={this.cancelHandle}
                    continue={this.continueHandle}
                    ingredients={this.state.ingredients}
                />
                <Route
                    path={this.props.match.path + '/contact-data'}
                    exact
                    render={() => (<ContactData ingredients={this.state.ingredients} />)} />
            </div>

        );
    }
}

export default Checkout; 

问题是当我点击 CotanctData 组件中的 Order 按钮时，页面会重新加载，并且由于某种原因我的 URL 更改为 http://localhost:3000/checkout/contact-data?name=&email=&street=&postal=，然后 Checkout 组件再次呈现，并且由于某种原因 componentDidMount 触发了两次。终于等到成分对象的打印了。

另外，我在 URL 中使用搜索查询来更改结帐组件的状态

完整项目地址-https://github.com/aniket-hue/Burger-App-React/tree/Routes

如果您不喜欢我不知道如何提出问题的问题，请多多包涵。

Answer 1

您必须将preventDefault 添加到您的orderHandler 方法中，因为如果表单中的按钮没有类型，则类型自动为submit，因此每次单击您都会提交表单。您也可以将type="button" 添加到您的button 内部表单中。

orderHandler = e => {
    e.preventDefault();
    console.log(this.props.ingredients);
}

Answer 2

您需要：

• 在<form> 的提交事件上调用e.preventDefult()。
• 或者，将<button type="button"> 添加到您的按钮，使其不是submit 您的表单。