使用 Meteor/React 引用文本字段答案

【问题标题】：Referencing a Text Field with Meteor/React使用 Meteor/React 引用文本字段
【发布时间】：2016-10-23 12:20:13
【问题描述】：

我正在尝试从文本字段中引用数据以供使用。这是我的代码，我正在使用 Meteor 和 React 来做到这一点。我也在使用 Bootstrap，也许这很矛盾。

import React, { Component, PropTypes } from 'react';
import ReactDOM from 'react-dom';
import { createContainer } from 'meteor/react-meteor-data';

export class HomeSubmission extends React.Component {

    redirectToSubmission(event) {
        event.preventDefault();
        FlowRouter.go('/submit');
        let question = ReactDOM.findDOMNode(this.refs.question).value.trim();
        console.log(question);
    }


    render() {
        return (
            <div className="jumbotron">
            <div className="container">



                                      <h1 className="text-center">Ask</h1>
                                      <p className="text-center">Ask a question, get an answer.</p>
                                  </div>

                <form onSubmit={this.redirectToSubmission.bind(this)}>
                    <div class="form-group" className="text-center">
                        <input type="text" class="form-control" ref="question" placeholder="Ask your question..." />
                        <br/> <button type="submit" class="btn btn-info">Submit</button></div>
                </form>
            </div>
        )
    }
}

它说问题是一个未解决的变量，当我说 ref="question" 时，它说这是一个无效的标签，但这就是它的完成方式。有什么想法吗？

【问题讨论】：

IIRC，在最近的 React 版本中，this.refs 持有实际的 DOM 节点。
那么我该如何打这个电话？

标签： twitter-bootstrap meteor reactjs twitter-bootstrap-3

【解决方案1】：

首先，在获取值之前不要更改路由（因为它可能会破坏元素）。

this.refs 现在引用 DOM 节点本身，因此无需使用 ReactDOM.findDOMNode() 来获取它们。

您可以使用this.refs.question.value.trim() 获取修剪后的值。

【讨论】：

这对我也不起作用。我尝试了两个版本
您是否评论了路由器重定向？你遇到了什么错误？尝试使用this fiddle 重现此内容或将其用作参考。顺便说一句，您使用的是class 而不是className。

【解决方案2】：

也许不是您需要的，但您可以使用受控元素。大致如下：

import React, { Component, PropTypes } from 'react';
import ReactDOM from 'react-dom';
import { createContainer } from 'meteor/react-meteor-data';

export class HomeSubmission extends React.Component {

    constructor() {
      super();

      this.state = {
        question: '',
      };
    }

    redirectToSubmission(event) {
        event.preventDefault();
        let question = this.state.question;

        FlowRouter.go('/submit');
    }

    render() {
        return (
            <div className="jumbotron">
              <div className="container">
                <h1 className="text-center">Ask</h1>
                <p className="text-center">Ask a question, get an answer.</p>
              </div>

              <form onSubmit={this.redirectToSubmission.bind(this)}>
                <div class="form-group" className="text-center">
                  <input
                    type="text"
                    class="form-control"
                    value={this.state.question}
                    onChange={(evt) => this.setState({question: evt.target.value.trim()})}
                    placeholder="Ask your question..."
                  />
                  <br/> <button type="submit" class="btn btn-info">Submit</button></div>
              </form>
            </div>
        );
    }
}

【讨论】：