只需调用event.preventDefault方法即可防止表单的默认行为

afterSubmission(event) {
    event.preventDefault();
    let name = this.state.itemName;
    this.setState ({
        storedItemName:this.state.itemName
    }, function() {
        alert(this.state.storedItemName); // Shows the right value!
    }
}

防止默认行为：

afterSubmission(event) {
    event.preventDefault();
    let name = this.state.itemName;
    this.setState ({
        storedItemName:this.state.itemName
    }, function() {
        alert(this.state.storedItemName); // Shows the right value!
    });
}

有 3 种方法可以做到这一点：

第一种方式

通过使用event.preventDefault();函数

• 当我们使用 onSubmit() 事件提交表单时，该事件的默认行为是刷新浏览器并呈现新的 html 页面。
• 为了防止 onSubmit 事件的页面刷新的这种默认行为，我们将 event.preventDefault(); 在我们为 onSubmit 事件调用的函数中。

输入字段.js

class InputField extends React.Component {
    
        state = {
                  itemName: "",
                  storedItemName: "",
                }
    
        handleNameChange = (event) => { 
            const { name,value } = event.target;  
            //we can't write this.setState({name:value}) this will set name as the key we need value of the name which is itemName
            
            this.setState({
                [name] : value //itemName:"the text we will enter" 
            });
        }
        afterSubmission = (event) => {
            event.preventDefault();
            this.setState ({
                storedItemName:this.state.itemName
            }, function() {
                alert(this.state.storedItemName);
            });
        }
        render() {
            return(
                <div>
                    <form onSubmit = {this.afterSubmission}>
                        <label> Item Name: 
                        <input 
                            onChange = {this.handleNameChange}
                            type = "text" 
                            name = "itemName" 
                            value = {this.state.itemName} 
                        />
                        </label>                    
                        <input type = "submit" value = "Submit" />
                    </form>
                    <div className = "itemList">
                        <p>Hi</p>
                        {this.state.storedItemName}
                    </div>
                </div>
            );
        }
    }
    
    export default InputField;

第二种方式

• 通过从表单元素中删除 onSubmit 事件

• 接下来是将提交的输入类型更改为输入类型按钮并为其添加一个 onClick 事件

输入字段.js

class InputField extends React.Component {

    state = {
              itemName: "",
              storedItemName: "",
            }

    handleNameChange = (event) => { 
        console.log(this);    
        const { name,value } = event.target;  
        this.setState({
            [name] : value
        });
    }
    afterSubmission = () => {
        this.setState ({
            storedItemName:this.state.itemName
        }, function() {
            alert(this.state.storedItemName);
        });
    }
    render() {
        return(
            <div>
                <form>
                    <label> Item Name: 
                    <input 
                        onChange = {this.handleNameChange}
                        type = "text" 
                        name = "itemName" 
                        value = {this.state.itemName} 
                    />
                    </label>                    
                    <input 
                        type = "button" 
                        onClick={this.afterSubmission} 
                        value = "Submit" 
                    />
                </form>
                <div className = "itemList">
                    <p>Hi</p>
                    {this.state.storedItemName}
                </div>
            </div>
        );
    }
}

export default InputField;

第三种方式

通过使用react表单钩子（https://www.react-hook-form.com/）

• 根据文档，我们必须在我们的开发服务器中安装 npm module

npm install react-hook-form

输入字段.js

import InputFieldForm from 'location specified';
    class InputField extends React.Component {
            
      render() {
        return(
              <div>
                  <InputFieldForm />
              </div>
              );
       }
    }
    export default InputField;

InputFieldForm.js

import React from "react";
import { useForm } from "react-hook-form";

const InputFieldForm = () =>{
    const onSubmit = (formData) =>{
        alert(JSON.stringify(formData));
        console.log(formData);
    } 

    const { register, handleSubmit } = useForm();
    return(
        <form onSubmit = {handleSubmit(onSubmit)}>
            <label> Item Name: 
            <input 
                {...register('itemName')}
                type = "text" 
                name = "itemName" 
            />
            </label>                    
            <input type = "submit" value = "Submit" />
        </form>
    )
}

export default InputFieldForm;