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

ReactJs：提交后刷新页面

3 个答案: