javascript - 在 React.js 中使用 preventDefault

Question

验证工作正常，但是当用户验证失败时，默认操作仍会执行。所以验证失败，笑话仍然返回。如果验证失败，则不应返回笑话。我曾尝试使用 preventDefault 但没有成功。

 import React, { useState } from "react";



function Search() {

    const [joke, setJoke] = useState()
    const [firstname, setFN] = useState("sharoze")
    const [lastname, setLN] = useState("khan")

    const newJoke = (first, last) => {
        fetch(`http://api.icndb.com/jokes/random?firstName=${first}&lastName=${last}`)
            .then(result => result.json())
            .then(result2 => {
                console.log(result2)
                setJoke(result2.value.joke)

            })

    }


    function validateForm() {
        var firstname = document.getElementsByName("firstname")[0].value;
        var lastname = document.getElementsByName("lastname")[0].value;
        if (firstname === "" && lastname === "") {
            alert("Please enter atleast one name");

        }
        else if (!(/^[a-zA-Z]+$/.test(firstname + lastname))) {
            alert("'Only alphabets allowed'");

        }

    }


    return (
        <div className="jokeForm" >
            <form name="searchForm" >
                <input type="text" name="firstname" placeholder="First name" value={firstname} onChange={(e) => setFN(e.target.value)} />
                <input type="text" name="lastname" placeholder="Last name" value={lastname} onChange={(e) => setLN(e.target.value)} />
            </form>
            <button id="button" onClick={(e) => { validateForm(newJoke(firstname, lastname)); return false; }}>click here for a personalised chuckle</button>
            <h3>{joke}</h3>
        </div >


    )
}




export default Search;

抱歉，代码有点乱七八糟!

Answer 1

我看到的主要问题是您没有将 onClick 中的 event 参数传递给您的验证函数，因此 preventDefault()功能不工作。尝试将 event 参数传递给验证函数，然后在函数中使用此参数来应用 preventDefault()。

--更新--

您根本不需要使用 preventDefault()。只需修改您的验证函数以仅在验证通过时调用新笑话。

import React, { useState } from "react";



function Search() {

    const [joke, setJoke] = useState()
    const [firstname, setFN] = useState("sharoze")
    const [lastname, setLN] = useState("khan")

    const newJoke = (first, last) => {
        fetch(`http://api.icndb.com/jokes/random?firstName=${first}&lastName=${last}`)
            .then(result => result.json())
            .then(result2 => {
                console.log(result2)
                setJoke(result2.value.joke)

            })

    }


    function validateForm() {
        var firstname = document.getElementsByName("firstname")[0].value;
        var lastname = document.getElementsByName("lastname")[0].value;
        if (firstname === "" && lastname === "") {
            alert("Please enter atleast one name");
            return false;
        }
        else if (!(/^[a-zA-Z]+$/.test(firstname + lastname))) {
            alert("'Only alphabets allowed'");
            return false;
        }
        newJoke(firstname, lastname);
    }


    return (
        <div className="jokeForm" >
            <form name="searchForm" >
                <input type="text" name="firstname" placeholder="First name" value={firstname} onChange={(e) => setFN(e.target.value)} />
                <input type="text" name="lastname" placeholder="Last name" value={lastname} onChange={(e) => setLN(e.target.value)} />
            </form>
            <button id="button" onClick={() => validateForm()}>click here for a personalised chuckle</button>
            <h3>{joke}</h3>
        </div >


    )
}

export default Search;