单击表单域时显示的其他文本- react
单击表单域时显示的其他文本- react
提问于 2019-05-31 03:11:15
我在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>回答 2
Stack Overflow用户
回答已采纳
发布于 2019-05-31 03:14:04
它是这样的：
在你想要观察的事件中，在状态中存储一些标志，例如
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，然后在render中将通知放在您希望出现通知的代码下面：
....
{this.state.userClicked && <div>Enter first name</div>}当userClicked为true时，上面的代码行将确保渲染div。
Stack Overflow用户
发布于 2019-05-31 03:17:02
您可以使用onFocus和onBlur事件来实现这一点，下面是一个示例：
<input
onFocus={() => this.setState({inputFocused: true})}
onBlur={() => this.setState({inputFocused: false})}
\>
{this.state.inputFocused && <div>Some message</div>}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56384303
复制相关文章
相似问题
腾讯云开发者
