基本React表单提交刷新整个页面

Question

我正在尝试创建一个将信息存储在组件的状态变量中的输入表单，然后在屏幕上输出该变量。我阅读了有关受控组件的文档，这就是我在这里尝试的内容。

我的主要问题是，当我单击提交时，正确的文本出现在屏幕上，但是随后整个页面都会刷新，我不确定为什么。从我在网上阅读的内容看，这refs似乎是一个解决方案，但我的理解是，我可以使用该组件或受控组件。

class InputField extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        itemName: "",
        storedItemName: "",
    };
    this.handleNameChange = this.handleNameChange.bind(this);        
    this.afterSubmission = this.afterSubmission.bind(this);
}
handleNameChange(event) {        
    this.setState({
        itemName: event.target.value
    });
}
afterSubmission(event) {
    let name = this.state.itemName;
    this.setState ({
        storedItemName:this.state.itemName
    }, function() {
        alert(this.state.storedItemName); // Shows the right value!
    });
}
render() {
    return(
        <div>
            <form onSubmit = {this.afterSubmission}>
                <label> Item Name: 
                <input 
                    type = "text" 
                    name = "itemName" 
                    value = {this.state.itemName} 
                    onChange = {this.handleNameChange}
                /></label>                    
                <input type = "submit" value = "Submit" />
            </form>
            <div className = "itemList">
                <p>Hi</p>
                {this.state.storedItemName}
            </div>
        </div>
    );
}

Answer 1

只需调用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!
    }
}