基本React JS-表单提交按钮刷新整个页面

Question

这里的Quick React问题：我正在尝试创建一个输入表单，让其将信息存储在组件的状态变量中，然后在屏幕上输出该变量。我阅读了有关受控组件的文档，这就是我正在尝试的（尽管效果很差）。我的主要问题是单击“提交”后，屏幕上会显示正确的文本，但随后整个内容都会刷新，我不确定为什么。从我在网上阅读的内容来看，裁判似乎是另一种解决方案，但据我了解，我可以使用该控件，也可以使用受控组件。我意识到这是一个菜鸟问题，所以随时将我链接到任何可以帮助我的文档/以前的示例。谢谢！（此外，对于任何拼写错误，英语不是我的母语）。

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

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

Answer 3

为了防止基本的 React 表单提交刷新整个页面，我们调用 e.preventDefault。在提交事件处理程序中。

\n

例如，我们写：

\n

import React from "react";\n\nexport default function App() {\n  const onSubmit = (e) => {\n    e.preventDefault();\n    console.log("refresh prevented");\n  };\n\n  return (\n    <div>\n      <form onSubmit={onSubmit}>\n        <button type="submit">submit</button>\n      </form>\n    </div>\n  );\n}\n

\n

创建 onSubmit 函数，并将其设置为 onSubmit 属性的值。

\n

在函数中，我们调用 e.preventDefault 来阻止默认的提交行为，即刷新整个页面的服务器端表单提交。

\n

我们在表单中有一个提交按钮来进行表单提交。

\n

因此，当我们单击“提交”时，我们应该看到控制台中记录的“刷新被阻止”字符串，而不是看到页面刷新。

\n