дополнительное отображение текста при нажатии поля формы - реагировать

Question

Я создаю форму в реакции, и в настоящее время, когда поле щелкают, оно добавляет синюю рамку (которую я хотел бы сохранить), но я хотел бы, чтобы внизу появился какой-то дополнительный текст, и я не уверен, как это сделать?

В основном, у меня есть поле для имени, и когда его щелкнули, я бы хотел, чтобы «Введите ваше имя» появилось под этим полем.

Вот что у меня сейчас есть:

<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

0

testing 30 Май 2019 в 22:11

Answer 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, чтобы установить флаг в ложь, когда ввод теряет фокус, Затем в рендере поместите ниже код, где вы хотите, чтобы уведомление появилось:

....
{this.state.userClicked && <div>Enter first name</div>}

Выше строки убедитесь, что div отображается, когда userClicked равен true.

1

giorgim 30 Май 2019 в 19:24

Answer 2

Вы можете использовать события onFocus и onBlur для достижения этого, вот пример:

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

1

Titus 30 Май 2019 в 19:17

дополнительное отображение текста при нажатии поля формы - реагировать

2 ответа

Похожие вопросы

Новые вопросы

javascript