我在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>
发布于 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。
发布于 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>}
https://stackoverflow.com/questions/56384303
复制相似问题