Question

我有一组表单字段，当我点击提交按钮时，我为每个输入文本框父div添加错误消息类这一切都正常，我的问题是，当我键入文本框时，我需要使用 reactjs

删除错误消息类

<div class="form-blk">
   <label class="f-row error-msg">
     <input type="text" required />
   </label>
</div>

我的div结构是这样的，用于验证我正在使用npm验证器模块

Answer 1

因此，问题中提供的数据有限，这应该会给你一些指导。

在keyUp上声明状态更改的状态：

 var state = {
      isKeyUp: false,
 }


updateKeyUpState() {
  this.setState( function( prevState) {
    return {
      isKeyUp: !prevState.isKeyUp
    }
  })
}

您的渲染功能：

render() {
    <button type="submit" onkeyup={updateKeyUpState}> SUBMIT </button>
      <div class="form-blk">
       <label className={this.state.isKeyUp ? 'f-row': 'f-row error-msg'}>
         <input type="text" required />
       </label>
    </div>
}

Answer 2

试试这个

function getCompState(){return {keyUp : false}} class Example extends React.Component{ constructor(props){ super(props) this.state = getCompState(); } render(){ var class_new = 'error-msg'; if(this.state.keyUp ){ class_new = 'class_new_defined' } return( <div className="form-blk"> <label className={"f-row "+class_new}> <input type="text" required /> </label> </div> ) } }

Css

.class_new{}

如何使用react js从keyup中的父div中删除该类

2 个答案: