使用 React 创建表单，如何让我的 err 消息在提交时显示（单击提交按钮时）？

Question

我正在使用 React 创建一个包含两个输入文本的表单，并且希望每次用户输入非数字值作为年龄并单击提交按钮时显示错误消息。 该表单显然正在执行我想要的大部分操作，但没有显示错误消息。

注意：如果可能的话，我不希望在这里使用 alert() 语法。

谢谢你的帮助。

 class MyForm extends React.Component { constructor(props) { super(props); this.state = { username: '', age: null, errormessage: '' }; } errorHandler = () => { let err = ''; if (nam === "age") { if (val !="" && !Number(val)) { err = <strong>Your age must be a number</strong>; } } this.setState({errormessage: err}); } myChangeHandler = (event) => { let nam = event.target.name; let val = event.target.value; this.setState({[nam]: val}); } render() { return ( <form onSubmit={this.errorHandler}> <h1>Hello {this.state.username} {this.state.age}</h1> <p>Enter your name:</p> <input type='text' name='username' onChange={this.myChangeHandler} /> <p>Enter your age:</p> <input type='text' name='age' onChange={this.myChangeHandler} /> <br/> <input type='submit' /> {this.state.errormessage} </form> ); } } ReactDOM.render(<MyForm />, document.getElementById('root'));

 <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <div id="root"></div>

Answer 1

您可以在Age字段下方显示错误消息。 它是条件渲染。 仅当errormessage包含某个值时errormessage呈现它。

render() {
    return (
      <form onSubmit={this.errorHandler}>
      <h1>Hello {this.state.username} {this.state.age}</h1>
      <p>Enter your name:</p>
      <input
        type='text'
        name='username'
        onChange={this.myChangeHandler}
      />
      <p>Enter your age:</p>
      <input
        type='text'
        name='age'
        onChange={this.myChangeHandler}
      />
      <br/>
      {this.state.errormessage ?
       <div id="err">{this.state.errorMessage}</div>
       : null}
      <input 
        type='submit' 
      />
      {this.state.errormessage}
      </form>
    );
  }
}

您可以通过检查是否呈现id=err div来测试它。

Answer 2

在您的 errorHandler 中，您有两个未定义的变量，nam 和 val，(nam === "age") 和 (val !="" && !Number(val))。 nam 和 val 变量仅在 myChangeHandler 方法的本地范围内起作用。 我会将您的 onChange 处理程序分成两个，如下所示以设置不同的输入。 最后，您可以在状态年龄上使用 Number() 将字符串转换为数字，然后使用 if 语句使用 isNaN() 来查看年龄是否为数字。 当您尝试在带有字母的字符串值上使用 Number() 时，它将返回 Not a Number，因此您可以使用 isNaN() 进行检查。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/isNaN

这是沙箱中的代码： https : //codesandbox.io/s/stoic-brattain-doz7t

class MyForm extends React.Component {
  constructor(props) {
   super(props);
   this.state = {
     username: "",
     age: null,
     errormessage: ""
   };
  }

  errorHandler = e => {
    e.preventDefault();
    let err = "";
    let newAge = Number(this.state.age);

    if (isNaN(newAge)) {
      err = <strong>Your age must be a number</strong>;
    }
    this.setState({ errormessage: err });
  };

  handleUserName = event => {
    this.setState({
      username: event.target.value
    });
  };

  handleMyAge = event => {
    this.setState({
      age: event.target.value
    });
  };

  render() {
    return (
      <form onSubmit={this.errorHandler}>
        <h1>
          Hello {this.state.username} {this.state.age}
        </h1>
    <p>Enter your name:</p>
    <input
      type="text"
      name="username"
      defaultValue=""
      onChange={this.handleUserName}
    />
    <p>Enter your age:</p>
    <input
      type="text"
      name="age"
      defaultValue=""
      onChange={this.handleMyAge}
    />
    <br />
    <input type="submit" />
    {this.state.errormessage}
  </form>
);
  }
}
ReactDOM.render(<MyForm />, document.getElementById("root"));

Answer 3

您的 errorHander 方法有问题。 onChangeHandler() 中的 nam 和 val 变量正在使用let ，因此它仅具有局部作用域。 我会建议您在 errorHandler 中从您的状态中获取 nam 和 age。

import ReactDOM from 'react-dom';
import React, { Component } from 'react';

class MyForm extends React.Component {
 constructor(props) {
   super(props);
   this.state = {
     username: '',
     age: null,
     errormessage: ''
   };
 }

 myChangeHandler = (event) => {
   let nam = event.target.name;
   let val = event.target.value;
   this.setState({[nam]: val});
 }

errorHandler = () => {
 let err = '';
 let val = this.state.age
   if (val !="" && !Number(val)) {
     err = <strong>Your age must be a number</strong>;
 }
 this.setState({errormessage: err});
}

 render() {
   return (
     <form onSubmit={this.errorHandler}>
     <h1>Hello {this.state.username} {this.state.age}</h1>
     <p>Enter your name:</p>
     <input
       type='text'
       name='username'
       onChange={this.myChangeHandler}
     />
     <p>Enter your age:</p>
     <input
       type='text'
       name='age'
       onChange={this.myChangeHandler}
     />
     <br/>
     <input 
       type='submit' 
     />
     {this.state.errormessage}
     </form>
   );
 }
}
ReactDOM.render(<MyForm />, document.getElementById('root'));

Answer 4

我能够优化@Springy 给出的答案以获得下面的代码。

谢谢@Springy

 class MyForm extends React.Component { constructor(props) { super(props); this.state = { username: "", age: null, errormessage: "" }; } errorHandler = e => { e.preventDefault(); let err = ""; let newAge = Number(this.state.age); if (isNaN(newAge)) { err = <strong>Your age must be a number</strong>; } this.setState({ errormessage: err }); }; handleUserAgeName = event => { this.setState({ [event.target.name]:event.target.value }); }; render() { return ( <form onSubmit={this.errorHandler}> <h1> Hello {this.state.username} {this.state.age} </h1> <p>Enter your name:</p> <input type="text" name="username" defaultValue="" onChange={this.handleUserAgeName} /> <p>Enter your age:</p> <input type="text" name="age" defaultValue="" onChange={this.handleUserAgeName} /> <br /> <input type="submit" /> {this.state.errormessage} </form> ); } } ReactDOM.render(<MyForm />, document.getElementById("root"));

 <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <div id="root"></div>