单击表单字段时显示其他文本-反应

时间:2019-05-30 19:11:15

标签: javascript html css reactjs forms

我正在反应中创建表单,当前单击该字段时会添加一个蓝色边框(我想保留该边框),但是我想在其下显示一些其他文本,并且我不确定如何这样吗?

基本上,我有一个名字字段,当单击它时,我想在该字段下显示“输入您的名字”。

这是我目前拥有的:

<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 个答案:

答案 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)

您可以使用onFocusonBlur事件来实现这一点,下面是一个示例:

<input
  onFocus={() => this.setState({inputFocused: true})}
  onBlur={() => this.setState({inputFocused: false})}
\>
{this.state.inputFocused && <div>Some message</div>}