javascript - 表单验证条件与 react

Question

我正在学习 reactjs，我在表单验证方面遇到了问题所以我想有一个条件，如果用户不输入他的名字，就会出现一条消息“空字段”

否则会出现 alert hello 'his name'

我的代码

import React ,{Component} from 'react';
class Formular extends Component {
    constructor(props) {
      super(props);
      this.state={
          nom:'',
          prenom:'',
          email:'',
          password:'',
          error:false,
          NameErr:''
      }
      
    }
    
    handleValidation() {
         if (this.state.nom =='')
         { this.state.error=true
           this.state.NameErr='empty field'
            //console.log( this.state.NameErr)
            return(
                this.state.NameErr
            )
        }
    }
    
    handleClick(event){
        event.preventDefault()
        let error = this.handleValidation()
        if (!error)  
        { 
            alert('hello '+ this.state.nom)
        } 
    }
 

    render() {
       /*  console.log('nom',this.state.nom)
        console.log('prenom',this.state.prenom) */
        return (
        <div >
            <div className="form__group field">
                <input type="input" className="form__field" 
                placeholder="Name" name="name" id='name' 
                required size='100' value={this.state.nom}  
                onChange={(event)=>this.setState({nom:event.target.value})} />
                <label for="name" className="form__label">Name</label>
            </div>

            <div className='alert'> {this.state.NameErr}  </div>
             
export default Formular

Answer 1

你不能强行改变状态

像这样

this.state.NameErr='empty field'
this.state.error=true

你需要使用setState

像这个例子

this.setState({NameErr:'empty field',error:true})

然后你可以在渲染方法中

{ this.state.error && <div className='alert'> {this.state.NameErr}</div>}

因此只有在出现错误时才会显示该元素