React.js如何在内部组件中查找ref元素

Question

我想与onChange事件中的<Filtering />组件共享数据到父组件<ViewTwoComponent />我不知道该怎么做

你知道如何在组件和他的父组件之间共享数据吗？

ViewTwoComponent他们没有看到ref值，我不知道为什么？

在控制台上是错误： 未捕获TypeError：无法读取未定义的属性'getDOMNode'

var ViewTwoComponent = React.createClass({
    "getInitialState": function() {
        return {
            "userTextValue": "hello11111111111111",
            "userTextRef": "userTextRef"
        }
    },
    "updateState": function(value) {
        this.setState({userTextValue: value })
    },
    "handleChange": function() {
        this.updateState(this.refs.userTextRef.getDOMNode().value)
    },
    "render": function() {
        return <div>
            <Inner />
            <Filtering refName={this.state.userTextRef} handleChange={this.handleChange} userTextValue={this.state.userTextValue} />
        </div>;
    }
})

var Inner = React.createClass({
    "render": function() {
        return <span>INNER</span>;
    }
});

var Filtering = React.createClass({
    "render": function() {
        return <span>
            <input type="text" ref={this.props.refName} onChange={this.props.handleChange} value={this.props.userTextValue} />
        </span>;
    }
});

React.render(< ViewTwoComponent />, document.getElementById("inner"))

Answer 1

当你试图引用this.refs.userTextRef时，你的意思有点令人困惑，但我假设你想要你所处状态的值。 我还假设关键userTextRef的值实际上不是userTextRef 。 您可以尝试使用方括号来访问该值。

  "handleChange": function() {
    this.updateState(this.refs[userTextRef]getDOMNode().value)
  }

Answer 2

我是React的新手，但是从我记得的教程中，你应该将Filtering组件的一个函数传递给ViewTwoComponent 。

var Filtering = React.createClass({
        "childChanged" : function(child, value) {
           console.log("child: " + child + "change value to: " value);
        },
        "render": function() {
            return <span>
                <input type="text" ref={this.props.refName} onChange={this.props.handleChange} value={this.props.userTextValue} notifyParent={this.childChanged} />
            </span>;
        }
    });

然后，在ViewTwoComponent类的handleChange方法中，调用this.props.notifyParent(this, this.state.userTextValue);