Я создаю форму в реакции, и в настоящее время, когда поле щелкают, оно добавляет синюю рамку (которую я хотел бы сохранить), но я хотел бы, чтобы внизу появился какой-то дополнительный текст, и я не уверен, как это сделать?
В основном, у меня есть поле для имени, и когда его щелкнули, я бы хотел, чтобы «Введите ваше имя» появилось под этим полем.
Вот что у меня сейчас есть:
<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 ответа
Это выглядит так:
В случае, если вы хотите следить, сохраните флаг в состоянии, например,
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.
Вы можете использовать события onFocus
и onBlur
для достижения этого, вот пример:
<input
onFocus={() => this.setState({inputFocused: true})}
onBlur={() => this.setState({inputFocused: false})}
\>
{this.state.inputFocused && <div>Some message</div>}
Похожие вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript / JS) и его различных диалектах / реализациях (кроме ActionScript). Включите все соответствующие теги в свой вопрос; например, [node.js], [jquery], [json] и т. д.