在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

我可以看到的主要问题是，您没有将event参数从onClick传递给您的验证函数，因此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;

Answer 2

您需要将事件作为参数传递给validateForm作为其第一个参数。

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