Работата с формуляри и елементи на формуляри при разработване с React може да бъде сложна, тъй като елементите на HTML формуляри се държат малко по-различно в React от другите DOM елементи.
Научете как да работите с формуляри и елементи на формуляри като квадратчета за отметка, текстови полета и въвеждане на текст с един ред.
Управление на полета за въвеждане във формуляри
В React управлението на поле за въвеждане във формуляр често се осъществява чрез създаване на състояние и обвързването му с полето за въвеждане.
Например:
функцияПриложение() {const [firstName, setFirstName] = React.useState('');
функцияhandleFirstNameChange(събитие) {
setFirstName( събитие.мишена.стойност )
}
връщане (
<форма>
<тип вход ='текст' заместител ='Първо име' onInput={handleFirstNameChange} />
</form>
)
}
По-горе имаме a първо име състояние, ан onInput събитие и а handleChange
манипулатор. The handleChange функцията се изпълнява при всяко натискане на клавиш, за да актуализира първо име състояние.Този подход може да е идеален, когато работите с едно поле за въвеждане, но създавате различни състояния и манипулаторните функции за всеки входен елемент биха станали повтарящи се при работа с множество входове полета.
За да избегнете писането на повтарящ се и излишен код в такива ситуации, дайте на всяко поле за въвеждане различно име, задайте обект като начална стойност на състоянието на вашия формуляр и след това попълнете обекта със свойства със същите имена като входа полета.
Например:
функцияПриложение() {конст [formData, setFormData] = React.useState(
{
първо име: '',
фамилия: ''
}
);
връщане (
<форма>
<тип вход ='текст' заместител ='Първо име' име='първо име' />
<тип вход ='текст' заместител ='Фамилия' име='фамилия' />
</form>
)
}
The formData ще служи като променлива на състоянието за управление и актуализиране на всички полета за въвеждане във формуляра. Уверете се, че имената на свойствата в обекта състояние са идентични с имената на входните елементи.
За да актуализирате състоянието с входните данни, добавете an onInput слушател на събития към входния елемент, след което извикайте създадената от вас манипулаторна функция.
Например:
функцияПриложение() {конст [formData, setFormData] = React.useState(
{
първо име: '',
фамилия: ''
}
);
функцияhandleChange(събитие) {
setFormData( (prevState) => {
връщане {
...prevState,
[event.target.name]: събитие.мишена.стойност
}
})
}
връщане (
<форма>
<вход
тип='текст'
заместител ='Първо име'
име='първо име'
onInput={handleChange}
/>
<вход
тип='текст'
заместител ='Фамилия'
име='фамилия'
onInput={handleChange}
/>
</form>
)
}
Кодовият блок по-горе използва an onInput събитие и манипулираща функция, handleFirstNameChange. Това handleFirstNameChange функцията ще актуализира свойствата на състоянието, когато бъде извикана. Стойностите на свойствата на състоянието ще бъдат същите като тези на съответните им входни елементи.
Преобразуване на вашите входове в контролирани компоненти
Когато HTML формуляр се изпрати, поведението му по подразбиране е да навигира до нова страница в браузъра. Това поведение е неудобно в някои ситуации, например когато искате валидиране на данните, въведени във формуляр. В повечето случаи ще намерите за по-подходящо да имате JavaScript функция с достъп до информацията, въведена във формата. Това може лесно да се постигне в React с помощта на контролирани компоненти.
С файловете index.html елементите на формуляра запазват следата на своето състояние и го променят в отговор на въвеждането на потребителя. С React функцията за зададено състояние променя динамично състояние, съхранено в свойството състояние на компонента. Можете да комбинирате двете състояния, като направите състоянието на React единственият източник на истина. По този начин компонентът, който създава формуляр, контролира какво се случва, когато потребителят въведе данни. Елементите на входната форма със стойности, които React контролира, се наричат контролирани компоненти или контролирани входове.
За да използвате контролирани входове във вашето приложение React, добавете подпора за стойност към вашия входен елемент:
функцияПриложение() {конст [formData, setFormData] = React.useState(
{
първо име: '',
фамилия: ''
}
);
функцияhandleChange(събитие) {
setFormData( (prevState) => {
връщане {
...prevState,
[event.target.name]: събитие.мишена.стойност
}
})
}
връщане (
<форма>
<вход
тип='текст'
заместител ='Първо име'
име='първо име'
onInput={handleChange}
стойност={formData.firstName}
/>
<вход
тип='текст'
заместител ='Фамилия'
име='фамилия'
onInput={handleChange}
стойност={formData.lastName}
/>
</form>
)
}
Стойностните атрибути на входните елементи вече са зададени да бъдат стойността на съответните свойства на състоянието. Стойността на входа винаги се определя от състоянието, когато се използва контролиран компонент.
Работа с входния елемент Textarea
The текстово поле е като всеки обикновен входен елемент, но съдържа многоредови входове. Полезно е при предаване на информация, която изисква повече от един ред.
Във файл index.html, таг за текстово поле елемент определя стойността си от своите деца, както се вижда в кодовия блок по-долу:
<текстово поле>
Здравей, как си?
</textarea>
С React, за да използвате текстово поле елемент, можете да създадете входен елемент с типа текстово поле.
Така:
функцияПриложение() {връщане (
<форма>
<тип вход ='текстово поле' име='съобщение'/>
</form>
)
}
Алтернатива на използването текстово поле като тип вход е да се използва текстово поле елемент на мястото на тага за входен тип, както се вижда по-долу:
функцияПриложение() {връщане (
<форма>
<текстово поле
име='съобщение'
стойност='Здравей, как си?'
/>
</form>
)
}
The текстово поле има атрибут стойност, който съдържа информацията на потребителя, въведена в текстово поле елемент. Това го кара да работи като входен елемент на React по подразбиране.
Работа с елемента за въвеждане на полето за отметка на React
Нещата са малко по-различни при работа с отметка входове. Полето за въвеждане на типа отметка няма атрибут стойност. Въпреки това, той има a проверено атрибут. Това проверено атрибут се различава от атрибут стойност, като изисква булева стойност, за да се определи дали квадратчето е отметнато или не.
Например:
функцияПриложение() {връщане (
<форма>
<тип вход ='отметка' id='присъединяване' име='присъединяване' />
<етикет htmlFor='присъединяване'>Искате ли да се присъедините към нашия екип?</label>
</form>
)
}
Елементът етикет се отнася до идентификатора на входния елемент, използвайки htmlFor атрибут. Това htmlFor атрибутът приема идентификатора на входния елемент - в този случай, присъединяване. Кога създаване на HTML форма, на htmlFor атрибут представлява за атрибут.
The отметка се използва по-добре като контролиран вход. Можете да постигнете това, като създадете състояние и му присвоите първоначалната булева стойност true или false.
Трябва да включите два подпори на отметка входен елемент: a проверено собственост и ан onChange събитие с манипулираща функция, която ще определи стойността на състоянието с помощта на setIsChecked() функция.
Например:
функцияПриложение() {конст [isChecked, setIsChecked] = React.useState(невярно);
функцияhandleChange() {
setIsChecked( (prevState) => !prevState )
}
връщане (
<форма>
<вход
тип='отметка'
id='присъединяване'
име='присъединяване'
checked={isChecked}
onChange={handleChange}
/>
<етикет htmlFor='присъединяване'>Искате ли да се присъедините към нашия екип?</label>
</form>
)
}
Този кодов блок генерира е проверено състояние и задава първоначалната му стойност на невярно. Той задава стойността на е проверено към проверено атрибут във входния елемент. The handleChange функцията ще се активира и ще промени стойността на състоянието на е проверено на неговата противоположност всеки път, когато щракнете върху квадратчето за отметка.
Един елемент на формуляр може вероятно да съдържа множество входни елементи от различни типове, като квадратчета за отметка, текст и др.
В такива случаи можете да ги обработвате по начин, подобен на начина, по който сте обработвали множество входни елементи от един и същи тип.
Ето един пример:
функцияПриложение() {позволявам[formData, setFormData] = React.useState(
{
първо име: ''
присъединяване: вярно,
}
);
функцияhandleChange(събитие) {
конст {име, стойност, тип, отметнато} = event.target;
setFormData( (prevState) => {
връщане {
...prevState,
[име]: Тип отметка? проверено: стойност
}
})
}
връщане (
<форма>
<вход
тип='текст'
заместител ='Първо име'
име='първо име'
onInput={handleChange}
стойност={formData.firstName}
/>
<вход
тип='отметка'
id='присъединяване'
име='присъединяване'
проверено={formData.join}
onChange={handleChange}
/>
<етикет htmlFor='присъединяване'>Искате ли да се присъедините към нашия екип?</label>
</form>
)
}
Имайте предвид, че в handleChange функция, setFormData използва троичен оператор за присвояване на стойността на проверено свойство към свойствата на състоянието, ако целевият входен тип е a отметка. Ако не, той присвоява стойностите на стойност атрибут.
Вече можете да боравите с React Forms
Тук научихте как да работите с формуляри в React, като използвате различни елементи за въвеждане на формуляр. Освен това научихте как да прилагате контролирани входове към елементите на формуляра си, като добавите стойностна подложка или отметната подложка, когато работите с квадратчета за отметка.
Ефективното боравене с входните елементи на формуляра на React ще подобри производителността на вашето React приложение, което ще доведе до по-добро цялостно потребителско изживяване.
