我正在反应中创建表单,当前单击该字段时会添加一个蓝色边框(我想保留该边框),但是我想在其下显示一些其他文本,并且我不确定如何这样吗?
基本上,我有一个名字字段,当单击它时,我想在该字段下显示“输入您的名字”。
这是我目前拥有的:
<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>
答案 0 :(得分:1)
它是这样的:
如果要监视,请在状态中存储一些标志,例如
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
为true时div被呈现。
答案 1 :(得分:1)
您可以使用onFocus
和onBlur
事件来实现这一点,下面是一个示例:
<input
onFocus={() => this.setState({inputFocused: true})}
onBlur={() => this.setState({inputFocused: false})}
\>
{this.state.inputFocused && <div>Some message</div>}