2016-07-08 1 views
1

Я новичок и ищу какой-оптимизированного способ получения формы значенияReactJS | Получение значений формы без сохранения состояния или с помощью getElementByID/рефов

Тот, который я использую, как это, вот один из моих форм ввода -

<input type="text" value={this.state.name} onChange={this.onNameChange} /> 

и его функция OnChange() является -

onNameChange: function(e){ 
    this.setState({ 
    name: e.target.value 
    }) 
} 

Я должен передать эту форму значение родительского компонента, используя функцию обратного вызова, которая будет принимать состояние, как его стоимости, чем эти значения г чтобы быть состояниями для родителя .. Также я не хочу использовать какие-либо ссылки ref или Id для тегов, потому что у меня будет несколько форм позже на

Есть ли эффективный способ получить значения формы без использования состояния ..?

Заранее спасибо

+0

Единственный правильный способ, чтобы получить значение поля формы в реакции, кроме на обработчик изменения использует реф , –

ответ

0

Я использую form-serialize в форме onSubmit action после просмотра Ryan Florence упоминать об этом в twitter (я не знаю, использует ли он его или рекомендуют заканчивается, просто пытается показать, что я не выдумал):

onFormSubmit: function (event) { 
    let formData = serializeForm(event.target, { hash: true }); 
    // formData = { foo: 'bar' } 
} 

render: function() { 
    return (
     <form onSubmit={this.handleSubmit}> 
      <input type="text" name="foo" value="bar"/> 
      <input type="submit" value="do it!"/> 
     </form> 
    ); 
} 

Взятые из http://myappincome.co.uk/using-form-serialize-in-react-js-forms/

+0

hi @MattDuFeu, спасибо за этот ответ, до сих пор это был самый полезный и интересный ответ, поскольку он дал мне знать о новом пакете npm, у меня на самом деле есть несколько форм на одной странице, и я работаю над его внедрением, если у вас есть полезная ссылка для работы с несколькими формами в оптимизированном виде, пожалуйста, поделитесь своим URL-адресом. Спасибо. – ady

0

Вы можете использовать ссылку реагируют государственные Примеси

https://facebook.github.io/react/docs/two-way-binding-helpers.html

var LinkedStateMixin = require('react-addons-linked-state-mixin'); 

var WithLink = React.createClass({ 
    mixins: [LinkedStateMixin], 
    getInitialState: function() { 
    return {message: 'Hello!'}; 
    }, 
    render: function() { 
    return <input type="text" valueLink={this.linkState('message')} />; 
    } 
}); 

Ваше сообщение текстовое поле будет связано с государственным сообщением

 Смежные вопросы

  • Нет связанных вопросов^_^