Javascript 为什么我的输入字段需要显示错误作为初始状态？

我有一个用户需要填写的输入字段。 当呈现页面时，我希望输入字段显示时没有错误红色边框，因为没有传递任何值，我只希望在用户键入某个值然后将其擦除时触发错误

我想要的行为

问题是，我需要在初始渲染时删除此红色边框

这是代码

this.callbackFunction（）}onChange={this.changeAverageState.bind（this）}/>

创建组件，这样它将获得

showBorder

属性

然后，您可以创建一个默认为

false

的存储，并在任何更新之后将其更改为

true

您的商店将处理此输入的所有道具

了解flux/redux

---

您需要在表单上的

keyup

上初始化验证。 我想你需要这样的东西：

var验证规则={
城市：{
消息：“城市不能为空”，
规则：“notEmpty”
},
地址:{
消息：“地址不能为空”，
规则：“notEmpty”
}
};
var$inputs=$（“#myForm:input”）；
var值={}；
$inputs.each（函数（）{
$（this）.on（'keyup'，function（））{
验证（this，validationRules[this.name]）；
});
});
功能验证（输入，ruleObj）{
var isInvalid=假；
如果（ruleObj.rule==='notEmpty'）{
如果（input.value==''）{
isInvalid=true；
}否则{
isInvalid=假；
}
}
如果（isInvalid）{
$（输入）.addClass（'is-invalid'）；
}否则{
$（输入）.removeClass（'is-invalid'）；
}
console.log（'Validated:'+input.name）；
}

。无效{
边框：1px实心#ff0000；
}

地址
城市

欢迎使用堆栈溢出！仅凭上述信息，我们无法帮助您。请使用可运行的堆栈片段更新您的问题（使用

[]

工具栏按钮）。堆栈代码段支持React，包括JSX。他正在使用reactjs，将其与jquery混合使用是一种不好的做法。是的，你说得对。这只是一个例子。你可以替换jQuery。你是最好的兄弟！哈哈哈工作得很好。酷：）如果它工作，那么你可以接受我的答案

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