我正在 React 中制作一个表单,目前当该字段被单击时,它会添加一个蓝色边框(我想保留),但我希望在下方显示一些额外的文本,但我不确定如何做这个?
基本上,我有一个名字字段,当它被点击时,我希望“输入你的名字”出现在这个字段下面。
这是我目前拥有的:
<div className="form-group form-row">
<label
id="firstNameLabel"
className="col-md-2 col-form-label text-md-right"
htmlFor="firstName1"
readOnly
>
First Name*
</label>
<div className="col-md-10">
<input
type="text"
className="form-control"
name="firstName1"
ref="firstName1"
placeholder="First Name"
value={this.state.firstName1}
onChange={this.handleChange}
required
/>
<div className="error" id="firstnameError" />
</div>
</div>
最佳答案
它是这样的:
如果您想监视事件,请在状态中存储一些标志,例如
this.setState({userClicked:true})
您要观看的事件可以是onFocus
,即
<input
type="text"
className="form-control"
name="firstName1"
ref="firstName1"
placeholder="First Name"
value={this.state.firstName1}
onFocus={()=>{ this.setState({userClicked:true}) }}
onChange={this.handleChange}
required
/>
您还可以使用onBlur
将标志设置为false,当输入失去焦点时,
然后在渲染中将下面的代码放在您希望通知出现的位置:
....
{this.state.userClicked && <div>Enter first name</div>}
上一行将确保当 userClicked
为真时呈现 div。
关于javascript - 单击表单字段时显示额外的文本 - react ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56384303/