Question

我正在尝试引用文本字段中的数据以供使用。这是我的代码，我正在使用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 =＆＃34;问题＆＃34;它说这是一个无效的标签，但它是如何完成的。有什么想法吗？

Answer 1

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

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

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

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

使用Meteor / React引用文本字段

2 个答案: