表单验证条件与反应答案

【问题标题】：Forms validation condition With react表单验证条件与反应
【发布时间】：2021-02-08 14:04:46
【问题描述】：

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

else 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

【问题讨论】：

标签： javascript reactjs forms validation jsx

【解决方案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>}

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

【讨论】：

我已将我的代码更改为此 this.setState({NameErr:'empty field',error:true}) 但即使我的字段为空也会出现警报“你好”
我什至发现，当我在字段名称中输入任何字符串时，消息“空字段”不会消失
只有在用户不输入任何内容时，我才能显示“空字段”消息？
即使字段为空也会显示消息提醒
因为处于状态if (this.state.nom =='')

【解决方案2】：

状态突变不正确，总是使用 setState() 来改变状态

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

jsx

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

【讨论】：

我已将我的代码更改为 this.setState({NameErr:'empty field',error:true}) 但即使我的字段为空，也会出现警报“你好”，即使在那之后当我在字段名称中输入任何字符串时，消息“空字段”不会消失，只有当用户不输入任何内容时，我如何才能收到消息“空字段”？即使该字段为空，它也会显示消息警报

【解决方案3】：

首先，您应该将输入包装在表单标签中，而不是简单的 div。接下来在表单上使用事件onSubmit 来触发表单的提交。

创建 un 方法来检查你的值是否不为空，然后做你想做的事

render () {

  return <form onSubmit={handleClick}>
    <div className="form__group field">
      <input 
        id='name' name="name"  type="text" 
        className="form__field" 
        size='100' required 
        placeholder="Name" 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>
  </form>;
}

NT：输入的类型属性应该是“文本”而不是“输入”

编辑：就像其他人说的那样，改变你不断变化的状态。

【讨论】：