为什么我的必填字段显示错误为初始状态？

Question

I have an input field that user need to fill. When the page is rendered i want the input field to be showing with no error red border because no value has been passed, i want to trigger the error only when the user type some value and then erased it.

The behavior that I want

The problem, I need to remove this red border on initial render

Here is code

<div className="ipt-form-group">
      <input type="number" required className={this.state.activeCSS} placeholder="Qual a média de faturamento mensal?" min="0" onInput={this.changeView.bind(this)} onChange={this.changeRevenuesState.bind(this)}/>
    </div>
    <div className="ipt-form-group">
      <input type="number" required className={this.state.activeCSS} placeholder="Qual a média de despesas fixas mensais?" min="0" onInput={this.changeView.bind(this),() => this.callbackFunction()} onChange={this.changeAverageState.bind(this)}/>
    </div>

Answer 1

You need to init the validation on keyup on your form. I think you need something like this:

 var validationRules = { city: { message: 'City cannot be empty', rule: 'notEmpty' }, address: { message: 'Address cannot be empty', rule: 'notEmpty' } }; var $inputs = $('#myForm :input'); var values = {}; $inputs.each(function() { $(this).on('keyup', function() { validation(this, validationRules[this.name]); }); }); function validation (input, ruleObj) { var isInvalid = false; if (ruleObj.rule === 'notEmpty') { if(input.value === '') { isInvalid = true; } else { isInvalid = false; } } if(isInvalid) { $(input).addClass('is-invalid'); } else { $(input).removeClass('is-invalid'); } console.log('Validated: ' + input.name); } 

 .is-invalid { border: 1px solid #ff0000; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="myForm"> <label>Address</label> <input type="text" name="address"> <label>City</label> <input type="text" name="city"> </form> 

(Of course you can replace jQuery. It is bad practice to mix it with react as @Lojka said)

Answer 2

create your component, so it will get showBorder property.

then you can create store with it being false by default, and after any update change it to true

and your store will handle all props for this input

read about flux / redux https://facebook.github.io/flux/docs/in-depth-overview.html#content