无法在React中通过ref获取输入表单的值

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>
    )
  }
}

当我输出console.log(blogTitle, blogContent, user)时，用户Id显示正确，但blogTitle和blogContent未定义。如果我console.log(this.ref.title)并查看对象，则该对象上没有value属性，尽管Title的内容已被填充。

我用的是react 15.3.0

Answer 1

你确定你应该使用ref吗?这个组件在哪里初始化?通常，数据是通过props传递给组件的。

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

Answer 2

ref="title"和ref="content"与and组件相关联，而不是它们创建的div，所以这就是为什么我的ref值是空的。当我用实际的's替换这些组件时，它就像预期的那样工作了。

Answer 3

refs返回不同的值，这取决于您是否在DOM组件或复合组件上使用它们。

在您的情况下，虽然<Input />和<Textarea />是复合组件，但this.refs.title和this.refs.content将引用支持实例，而不是DOM节点。

您可以使用ReactDOM.findDOMNode从实例中获得DOM节点，例如ReactDOM.findDOMNode(this.refs.title).value(假设<Input />组件返回<input />节点作为根元素，否则您可能需要查询输入，例如ReactDOM.findDOMNode(this.refs.title).getElementByTagName('input').value)