У меня есть простая форма в моей render
функции, например так:
render : function() {
return (
<form>
<input type="text" name="email" placeholder="Email" />
<input type="password" name="password" placeholder="Password" />
<button type="button" onClick={this.handleLogin}>Login</button>
</form>
);
},
handleLogin: function() {
//How to access email and password here ?
}
Что я должен написать в моем handleLogin: function() { ... }
доступе Email
и Password
полях?
javascript
html
reactjs
frontend
myusuf
источник
источник
onSubmit
форму, а не нажатие кнопки - таким образом вы также будете обрабатывать пользователя, отправляющего форму, нажав клавишу ввода.<form>
С<button>
или<input>
сtype=submit
получите представлен , когда пользователь нажимает Enter в любой из форм - х<input type=text>
. Если вы полагаетесь наonClick
кнопку, пользователь должен щелкнуть по кнопке или сфокусировать ее и нажать Enter / пробел. ИспользованиеonSubmit
включит оба варианта использования. Когда формы не поддерживают Enter для отправки, они могут чувствовать себя разбитыми.Ответы:
Используйте
change
события на входах, чтобы обновить состояние компонента и получить к нему доступhandleLogin
:Рабочая скрипка .
Кроме того, прочитайте документы, есть целый раздел, посвященный обработке форм : Формы
Раньше вы могли также использовать двусторонний вспомогательный миксин привязки данных React для достижения того же результата, но теперь он устарел в пользу установки значения и изменения обработчика (как указано выше):
Документация здесь: Помощники двусторонней привязки .
источник
valueLink
, ваш первый пример должен установитьvalue
элементы ввода. Без этого значения «неуправляемы» в терминах React.<input ... value={this.state.password}>
,Есть несколько способов сделать это:
1) Получить значения из массива элементов формы по индексу
2) Использование атрибута имени в HTML
3) Использование ссылок
Полный пример
источник
Альтернативный подход - использовать
ref
атрибут и ссылаться на значенияthis.refs
. Вот простой пример:Дополнительную информацию можно найти в документации React: https://facebook.github.io/react/docs/more-about-refs.html#the-ref-string-attribute.
По многим причинам, описанным в разделе Как использовать переключатели в React? этот подход не всегда лучший, но он представляет полезную альтернативу в некоторых простых случаях.
источник
Простой способ справиться с реферами:
источник
Object.keys()
для следования,map()
как это:Object.keys(this.refs).map(field => formData[field] = this.refs[field].value)
<input type="text" ref={(input) => { this.textInput = input; }} />
Добавляем к ответу Майкла Шока:
Посмотрите эту среднюю статью: Как обрабатывать формы с помощью Just React
Этот метод получает данные формы только при нажатии кнопки «Отправить». Гораздо чище ИМО!
источник
Вы можете переключить
onClick
обработчик события на кнопке наonSubmit
обработчик в форме:Затем вы можете использовать
FormData
для анализа формы (и, если хотите, построить объект JSON из его записей).источник
Я бы предложил следующий подход:
источник
Если все ваши входы / textarea имеют имя, вы можете отфильтровать все из event.target:
Полностью неконтролируемая форма 😊 без методов onChange, value, defaultValue ...
источник
Для тех, кто не хочет использовать ref и сбрасывать состояние с
OnChange
событием, вы можете просто использовать простой дескриптор OnSubmit и проходить черезFormData
объект. Этот пример использует React Hooks:источник
Кроме того, это тоже можно использовать.
источник
Дайте ваши ссылки, как это
тогда вы можете получить к нему доступ в своем дескрипторе, как Су
источник
Более наглядный пример с разрушением es6
источник
Если вы используете Redux в своем проекте, вы можете рассмотреть возможность использования этого компонента более высокого порядка https://github.com/erikras/redux-form .
источник
Во многих событиях в javascript у нас
event
есть объекты, которые дают объект, включая то, что произошло, и каковы значения и т. Д.Это то, что мы используем с формами в ReactJs ...
Итак, в вашем коде вы устанавливаете состояние на новое значение ... что-то вроде этого:
Также это пример формы в React v.16, просто как ссылка на форму, которую вы создадите в будущем:
источник
Я использую так, используя состояние React Component:
источник
Выходное изображение прилагается здесь
источник
Это может помочь пользователям Meteor (v1.3):
источник
Улучшить пользовательский опыт; когда пользователь нажимает на кнопку отправки, вы можете попытаться получить форму, чтобы сначала показать отправляющее сообщение. Получив ответ от сервера, он может соответствующим образом обновить сообщение. Мы достигаем этого в React путем объединения статусов. Смотрите кодовый блок или фрагменты ниже:
Следующий метод выполняет первое изменение состояния:
Как только React отобразит вышеприведенное сообщение об отправке на экране, он вызовет метод, который отправит данные формы на сервер: this.sendFormData (). Для простоты я добавил setTimeout, чтобы имитировать это.
В React метод this.setState () отображает компонент с новыми свойствами. Таким образом, вы также можете добавить некоторую логику в метод render () компонента формы, который будет вести себя по-разному в зависимости от типа ответа, который мы получаем от сервера. Например:
codepen
источник
Если у вас есть несколько вхождений имени элемента, вы должны использовать forEach ().
HTML
JS
Обратите внимание, что dels в этом случае является RadioNodeList, а не массивом, и не является Iterable. ForEach () является встроенным методом класса списка. Вы не сможете использовать карту () или уменьшить () здесь.
источник