使用 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>