Не удалось получить значение формы ввода через реф в React

Question

Я относительно новым реагировать, и, несмотря на это, видя пример, работающий на видео-учебник, я не могу заставить его работать:

import React from 'react'; 
import Form from 'muicss/lib/react/form'; 
import Input from 'muicss/lib/react/input'; 
import Textarea from 'muicss/lib/react/textarea'; 
import Button from 'muicss/lib/react/button'; 

export default class blogCreate extends React.Component { 
addBlog(event) { 
    event.preventDefault(); 
     var blogTitle = this.refs.title.value; 
     var blogContent = this.refs.content.value; 
     var user = Meteor.userId(); 
     console.log(blogTitle, blogContent, user); 
     Meteor.call('blogAdd', blogTitle, blogContent, user); 
} 
render() { 
    return(
     <Form onSubmit={this.addBlog.bind(this)}> 
      <legend>Add a blog post</legend> 
      <Input name='title' label="Title" ref="title" /> 
      <Textarea name='text' label="Text" ref="content" /> 
      <Button variant="raised" type="submit">Submit</Button> 
     </Form> 

    ) 
    } 
} 

Когда я выведите консоль.log (blogTitle, blogContent, user). Идентификатор пользователя отображается правильно, но blogTitle и blogContent не определены. Если я console.log (this.ref.title) и посмотрю на объект, на этом объекте нет свойства значения, несмотря на то, что содержимое заполняемого заголовка.

Я использую реакцию 15.3.0.

Answer 1

Вы уверены, что используете используемый ref? Где этот компонент инициализирован? Обычно данные передаются компоненту с помощью реквизита.

https://facebook.github.io/react/docs/more-about-refs.html#the-ref-returned-from-reactdom.render

Answer 2

терпение = «название» и исх = «содержание» были связаны с компонентами и вместо дивы они создавали, так что именно поэтому мои ценности реф были пусты. Когда я заменил эти компоненты фактическими, он работал, как ожидалось.

Answer 3

refs возвращает другое значение в зависимости от того, используете ли вы их на компонентах DOM или составных компонентах.

В вашем случае это выглядит, хотя <Input /> и <Textarea /> являются составными компонентами так this.refs.title и this.refs.content будут ссылаться на примеры аккомпанемента, а не DOM узлов.

Вы можете получить узел DOM из экземпляра, используя ReactDOM.findDOMNode, например. ReactDOM.findDOMNode(this.refs.title).value (при условии, что компонент <Input /> возвращает узел <input /> в качестве корневого элемента, в противном случае может потребоваться запрос для ввода, например ReactDOM.findDOMNode(this.refs.title).getElementByTagName('input').value)