基本 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>
    );
}

原文由 Mike Smith Alexiss 发布，翻译遵循 CC BY-SA 4.0 许可协议

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!
    }
}

原文由 Prakash Sharma 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

防止默认行为：

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

原文由 Bhojendra Rauniyar 发布，翻译遵循 CC BY-SA 4.0 许可协议