在 React.js 中使用 preventDefault

Question

The validation is working correctly, however when the user fails the validation the default action is still carried out. So validation fails and the joke is still returned. If validation fails, the Joke should not be returned. I have tried to use preventDefault but no luck.

 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;

sorry the code has been a little butchered!

Answer 1

The main problem I can see is that you don't pass event argument from onClick to your validation function, hence preventDefault() function is not working. Try to pass event argument to validation function and then use this argument in function to apply preventDefault() .

--Update--

You don't need to use preventDefault() at all. Just modify your validation function to call new joke only if validation is passed.

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;

Answer 2

You need to pass the event as an argument to validateForm as its first argument.

onClick={(event) => validateForm(event)}

function validateForm(event) {
  event.preventDefault();

  var firstname = document.getElementsByName("firstname")[0].value;
  var lastname = document.getElementsByName("lastname")[0].value;

  if (firstname == "" && lastname == "") {
    alert("Please enter atleast one name"); return;
  }
  else if (!(/^[a-zA-Z]+$/.test(firstname + lastname))) {
    alert("'Only alphabets allowed'"); return;
  }
}