单击表单字段时显示额外的文本 - 反应答案

【问题标题】：additional text display when form field is clicked - react单击表单字段时显示额外的文本 - 反应
【发布时间】：2019-05-30 19:11:14
【问题描述】：

我正在制作一个响应表单，当前当单击该字段时，它会添加一个蓝色边框（我想保留它）但我希望在下面显示一些额外的文本，我不知道如何这样做？

基本上，我有一个名字字段，当点击它时，我希望“输入您的名字”出现在该字段下方。

这是我目前拥有的：

<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>

【问题讨论】：

标签： javascript html css reactjs forms

【解决方案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 为真时呈现div。

【讨论】：

嗨 giorgi - 我不知道 react（我使用 Vue），但你不能只用 CSS 来做这件事 - 让 react 远离它吗？让带有文本的 div 始终存在（这有利于可访问性）但隐藏（visibility:hidden），然后使用控件上的:focus 选择器将其更改为visible。如果你正在使用 react 来做，那么 onFocus 还不够吗？（我认为您不必注意点击，因为点击时会获得焦点，并且您已经在处理焦点）
@StephenP 我改写了答案。看来您建议使用一些纯 CSS 方式，我不知道您会怎么做，因为我不是 CSS 专业人士。我想会好的。 React 不鼓励的一件事是直接修改 DOM。因为 React 应该这样做。如果你的 CSS 方法不违反这一点，应该没问题。

【解决方案2】：

您可以使用onFocus 和onBlur 事件来实现这一点，这是一个示例：

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

【讨论】：