javascript - React - 将类添加到空输入字段
问题描述
仅当输入为空时,我才想添加红色边框。我找不到在 React 中“添加类”的方法,所以我正在使用状态。现在代码将为所有输入添加红色边框,即使它有文本。
状态:
this.state = {
inputBorderError: false,
};
HTML/JSX:
<label>Name</label>
<input className={
this.state.inputBorderError ? 'form-input form-input-fail' : 'form-input'
} />
<label>Email</label>
<input className={
this.state.inputBorderError ? 'form-input form-input-fail' : 'form-input'
} />
<label>Message</label>
<textarea className={
this.state.inputBorderError ? 'form-input form-input-fail' : 'form-input'
} />
CSS:
.form-input-fail {
border: 1px solid red;
}
JS:
let inputFields = document.getElementsByClassName('form-input');
for (var i = 0; i < inputFields.length; i++) {
if (inputFields[i].value === '') {
this.setState({
inputBorderError: true,
});
}
}
我在我的代码中看到了错误,因为它基本上在找到空输入时将状态设置为 true。我想我可能会错误地处理这个问题,因为只有一个状态。是否有基于我的状态方法的解决方案,或者是否有其他解决方案?
解决方案
现在,您有一个影响所有输入的状态值,您应该考虑为每个input
. 此外,您的输入不受控制,将更难记录和跟踪它们的值以进行错误处理。
为每个input
标签指定一个名称属性是一种很好的做法。使其更容易动态更新其相应的状态值。
尝试以下操作,开始输入每个输入,然后删除您的文本:https ://codesandbox.io/s/nervous-feynman-vfmh5
class App extends React.Component {
state = {
inputs: {
name: "",
email: "",
message: ""
},
errors: {
name: false,
email: false,
message: false
}
};
handleOnChange = event => {
this.setState({
inputs: {
...this.state.inputs,
[event.target.name]: event.target.value
},
errors: {
...this.state.errors,
[event.target.name]: false
}
});
};
handleOnBlur = event => {
const { inputs } = this.state;
if (inputs[event.target.name].length === 0) {
this.setState({
errors: {
...this.state.errors,
[event.target.name]: true
}
});
}
};
handleOnSubmit = event => {
event.preventDefault();
const { inputs, errors } = this.state;
//create new errors object
let newErrorsObj = Object.entries(inputs)
.filter(([key, value]) => {
return value.length === 0;
})
.reduce((obj, [key, value]) => {
if (value.length === 0) {
obj[key] = true;
} else {
obj[key] = false;
}
return obj;
}, {});
if (Object.keys(newErrorsObj).length > 0) {
this.setState({
errors: newErrorsObj
});
}
};
render() {
const { inputs, errors } = this.state;
return (
<div>
<form onSubmit={this.handleOnSubmit}>
<label>Name</label>
<input
className={
errors.name ? "form-input form-input-fail" : "form-input"
}
name="name"
value={inputs.name}
onChange={this.handleOnChange}
onBlur={this.handleOnBlur}
/>
<label>Email</label>
<input
className={
errors.email ? "form-input form-input-fail" : "form-input"
}
name="email"
value={inputs.email}
onChange={this.handleOnChange}
onBlur={this.handleOnBlur}
/>
<label>Message</label>
<textarea
className={
errors.message ? "form-input form-input-fail" : "form-input"
}
name="message"
value={inputs.message}
onChange={this.handleOnChange}
onBlur={this.handleOnBlur}
/>
<button type="submit">Submit</button>
</form>
</div>
);
}
}
推荐阅读
- c++ - send text to the input line console c++
- unit-testing - 在测试中覆盖 Go 方法
- python - Django 以某种方式尝试渲染错误的模板
- mongodb - mongodb mms监控代理找不到组成员
- angular - 如何阻止我的表单以供将来编辑?
- javascript - 在 Javascript(Web 应用程序)中读取和使用用户文件中的数据,无需上传它们
- elasticsearch - 在弹性搜索中保护数据
- regex - 用于 HTTP 请求的 jmeter 正则表达式
- angular - Angular 表单以错误的格式收集数据
- oracle-apex - Oracle Apex 身份验证方案登录错误