Question

快速反应问题：我试图创建一个输入表单，将信息存储在组件的状态变量中，然后在屏幕上输出该变量。我阅读了关于受控组件的文档以及我在这里尝试（尽管很差）的内容。我的主要问题是，一旦我点击提交，屏幕上会出现正确的文字，但整个事情都会刷新，我不知道为什么。从我在线阅读的内容来看，refs似乎是另一种解决方案，但我的理解是我可以使用它，或者我可以使用受控组件。我意识到这是一个菜鸟问题，所以请随意将我链接到可以帮助我的任何文档/之前的示例。留言Merci！（另外，对于任何拼写错误，抱歉，英语不是我的母语。）

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

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

2 个答案: