ReactJs：提交后刷新页面

Question

我正在尝试使用 ReactJS，我遇到了这个问题：

我有一个简单的字段。 当我点击提交按钮时，页面完成代码但立即重新加载（我没有时间阅读控制台）。

const INITIAL_STATE = {
    teamName: '',
    error: null,
};

class SearchingForm extends Component {
    constructor(props){
        super(props);
        this.state = { 
            ...INITIAL_STATE,
            results: []
        };
    }

    onSubmit = event => {
        const { teamName } = this.state;
        this.searching(this.state.teamName)
        event.preventDefaul();
    }

    searching(teamName){
       console.log("teamName: ", teamName)
    }

    onChange = event => {
        this.setState({ [event.target.name]: event.target.value });
        console.log(this.state)
    };

    render() {
        const {
            teamName,
            error
        } = this.state;

        const isInvalid = teamName === '';

        return (
            <form onSubmit={this.onSubmit}>
                <input 
                    name="teamName"
                    value={teamName}
                    onChange={this.onChange}
                    type="text"
                    placeholder="Team Name"
                />
                <button type="submit">Search</button>
              
            </form>
        );
    }
}

为什么我有这种行为？

谢谢你。

Answer 1

有一个错字而不是event.preventDefaul(); 它应该是event.preventDefault() 。 它曾经在你的方法的第一行。

Answer 2

你的代码有错别字

event.preventDefaul(); 

代替

event.preventDefault();

它应该是 onSubmit 函数的第一行。

Answer 3

首先你必须调用event.preventDefault(); 在onsubmit函数的第一行。 其次，它们是preventDefault 中的错字错误请在给定的代码下使用：

onSubmit = event => {
        event.preventDefaul();
        const { teamName } = this.state;
        this.searching(this.state.teamName);
    }