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”与组件相关联，而不是与他们创建的div相关联，因此这就是我的ref值为空的原因。当我用实际的组件替换这些组件时，它按预期工作。

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）

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

3 个答案: