Отображение дополнительного текста при нажатии на поле формы - реагировать
я создаю форму в реакции, и в настоящее время, когда щелкают поле, оно добавляет синюю рамку (которую я хотел бы сохранить), но я хотел бы, чтобы под ней появился дополнительный текст, и я не знаю, как это сделать?
в основном, у меня есть поле для имени, и когда его щелкнули, я бы хотел, чтобы «Введите свое имя» появилось под этим полем.
вот что у меня сейчас есть:
<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.handleChangeEvent}
required
/>
<div className = "error" id = "firstnameError" />
</div>
</div>
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 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.handleChangeEvent}
required
/>
Вы также можете использовать onBlur, чтобы установить флаг в false, когда ввод теряет фокус,
Затем в рендере поместите ниже код, где вы хотите, чтобы уведомление отображалось:
....
{this.state.userClicked && <div>Enter first name</div>}
Над строкой убедитесь, что div отображается, когда userClicked истинно.
@StephenP Я переформулировал ответ. Кажется, вы предлагаете какой-то чистый способ CSS, я не знаю, как вы это сделаете, я не профессионал в CSS. Я думаю, это было бы хорошо. Одна вещь, которую React не одобряет, — это прямое изменение DOM. Потому что React должен это делать. Если ваш подход к CSS не нарушает этого, все должно быть в порядке.
Для этого вы можете использовать события onFocus и onBlur, вот пример:
<input
onFocus = {() => this.setState({inputFocused: true})}
onBlur = {() => this.setState({inputFocused: false})}
\>
{this.state.inputFocused && <div>Some message</div>}
Привет, Георгий. Я не знаю, как реагировать (я использую Vue), но не могли бы вы сделать это только с помощью CSS? Пусть div с текстом всегда присутствует (что хорошо для доступности), но скрыт (
visibility:hidden), затем используйте селектор:focusна элементе управления, чтобы изменить его наvisible. Если вы являются делаете это с реакцией, не будет ли достаточно onFocus? (Я думаю, вам не нужно следить за кликом, потому что фокус получается при нажатии, и вы уже обрабатываете фокус)