React ：如果用户输入文本，则在单击“提交”按钮时显示错误消息

Question

我在 React 中创建了一个项目。 我希望当用户单击“提交”按钮时，如果在输入“FormDebut”中他输入“文本”类型的字符，它会向他显示一条错误消息。

但我不能这样做:'(，你能帮我吗？提前谢谢！

FormulaireReservations.js ：

export default function FormulaireReservation() {
 
  return (

    <div className="Formulaire">
      <Logo/>
     <h2><center>Formulaire de réservation</center></h2>
      <FormDebut/>

      <center><input type="submit" value="Submit" /></center>
    </div>
  );
}

组件 FormDebut.js ：

  
  const [value, setValue] = React.useState("");
  
  const onChange = (e) => {
    const formattedValue = formatInput(e.target.value);
    if (formattedValue.length < 6) {
      setValue(formattedValue);
    }
  }
  
  const formatInput = (input) => {
    if (input.length > 2 && input[2] !== ":") {
      return input.substring(0, 2) + ":" + input.slice(2);
    }
    return input;
  }
  
  return (
    <div className="Form">
      <div>Début : </div>
      <input placeholder="00:00" type="text" onChange={onChange} value={value}/>
    </div>
  )
}

export default FormDebut; ```

Answer 1

在新文档中对此进行测试，然后您可以从那里将其实施到您的工作中。 您可以有一个参数，如果用户必须输入 1-10 之间的数字，如果他们不输入，那么您可以显示错误消息。 如果数字在 1-10 之间，那么您可以重定向它们。 isNAN（不是数字）是一个条件，用于验证用户的输入。 该函数将检查输入是否不是数字，它将检查输入是否小于 1 或大于 10，如果所有这些条件都为真，则会显示错误。

<p>Please input a number between 1 and 10:</p>

<input id="numb">

<button type="button" onclick="myFunction()">Submit</button>

<p id="demo"></p>

<script>
function myFunction() {
  // Get the value of the input field with id="numb"
  let x = document.getElementById("numb").value;
  // If x is Not a Number or less than one or greater than 10
  let text;
  if (isNaN(x) || x < 1 || x > 10) {
    text = "Input not valid";
  } else {
    text = "Input OK";
  }
  document.getElementById("demo").innerHTML = text;
}
</script>

Answer 2

我不确定我是否理解您的要求，但似乎当您单击提交按钮时，您想检查输入是否为数值。 如果是这种情况，这应该有效：

https://codesandbox.io/s/infallible-browser-74r5d7?file=/src/App.js

我将值状态移动到表单本身，并将其作为道具传递给它的孩子。 我还添加了一个名为 error 的新状态变量，它被传递给 FormDebut。 单击提交按钮时，我从值中删除:并检查是否可以将其解析为数字。 如果不是，我设置错误，否则我清除错误。

希望有帮助

Answer 3

以下是您可以修改组件的内容：

在您的 FormulaireReservations.js 中：

export default function FormulaireReservation() {

const [value, setValue] = React.useState("");
const [errorMsg, setErrorMsg] = React.useState("");

const handleSubmission = () => {
    if (isNaN(value)) {
        setErrorMsg('Input should not be a text')
    }
}

React.useEffect(() => {
    setErrorMsg('')
}, [value])

return (

    <div className="Formulaire">
        <Logo />
        <h2><center>Formulaire de réservation</center></h2>
        <FormDebut value={value} setValue={setValue} msg={errorMsg} />

        <center><input type="button" onClick={handleSubmission} value="Submit" /></center>
    </div>
);

}

在你的 FormDebut.js 中：

function FormDebut({ value, setValue, msg }) {

const onChange = (e) => {
    const formattedValue = formatInput(e.target.value);
    if (formattedValue.length < 6) {
        setValue(formattedValue);
    }
}

const formatInput = (input) => {
    if (input.length > 2 && input[2] !== ":") {
        return input.substring(0, 2) + ":" + input.slice(2);
    }
    return input;
}

return (
    <div className="Form">
        <div>Début : </div>
        <input placeholder="00:00" type="text" onChange={onChange} value= {value} />
        { msg && <p>{msg}</p> }
    </div>
)}export default FormDebut;

    

因此，基本上，值和 errorMsg 状态被传递给另一个包含输入字段的组件。 每次输入字段的更改也会更新父组件中声明的状态。 当用户单击提交按钮时，它会调用一个检查值是否为数字的函数。 基于此，errorMsg 状态被更新。 在 FormDebut 组件中，如果设置了任何 msg，则会在输入字段之后显示错误消息。