2

我正在从我的应用程序中提取一些代码到一个开源包中。我的应用程序和我的包都依赖于相同版本的 React，0.14.8。

自从我将代码移动到包中（并进行了一些代码更改）以来，我一直无法呈现使用 refs 的组件。我已经寻找了几个小时的建议，它产生了两个基本提示：

  1. 确保反应版本不冲突
  2. 确保带有 refs 的组件是在另一个组件的渲染方法中创建的

据我所知，我满足了这两个标准。

class RangeQuery extends React.Component {
  static propTypes = {
    header: PropTypes.object.isRequired,
    onQueryChange: PropTypes.func.isRequired
  }

  handleChange(ev) {
    const { header } = this.props

    const start = _.isEmpty(this.refs.start.value) ? null : this.refs.start.value
    const end = _.isEmpty(this.refs.end.value) ? null : this.refs.end.value

    const values = typeof(header.query.format) === 'function' ?
      [header.query.fmtValue(start), header.query.fmtValue(end)] :
      [start, end]

    this.props.onQueryChange(header.field, header.query, values)
  }

  render() {
    return (
      <div>
        <input className="form-control" type="text" ref="start" onChange={::this.handleChange} placeholder="min" />
        <input className="form-control" type="text" ref="end"   onChange={::this.handleChange} placeholder="max" />
      </div>
    )
  }
}

const components = {
  like: LikeQuery,
  eq: EqQuery,
  range: RangeQuery
}

export default class HeaderQuery extends React.Component {
  static propTypes = {
    header: PropTypes.object.isRequired,
    onQueryChange: PropTypes.func.isRequired
  }

  render() {
    const { header, onQueryChange } = this.props
    const Query = components[header.query.type] || NoQuery

    return (
      <Query header={header} query={header.query} onQueryChange={this.props.onQueryChange} />
    )
  }
}

当我尝试加载带有此组件的页面时，出现错误：

invariant.js:39 Uncaught Invariant Violation: addComponentAsRefTo(...): 只有 ReactOwner 可以有 refs。您可能正在向未在组件render方法中创建的组件添加 ref，或者您加载了多个 React 副本

refs=如果我从input标签中删除它，它就会呈现，但我显然需要那些。

我已经考虑过编写一个 reducer 来控制这些组件的状态的替代方案，但对于应该工作的东西来说，这是一项繁重的工作。

如何修复我的 refs 以使其正常工作？

更新

虽然我已经接受了这个问题的答案，因为它允许我像我想要的那样使用 refs，但问题仍然是为什么它首先会发生，并且调查显示最大的怀疑是 react 的多个版本。但据我所知，情况似乎并非如此。

sam@sam-macbook-ubuntu:~/myProject/client$ npm ls | grep react
├─┬ babel-preset-react@6.5.0
│ ├─┬ babel-plugin-transform-react-display-name@6.5.0
│ ├─┬ babel-plugin-transform-react-jsx@6.7.5
│ │ ├─┬ babel-helper-builder-react-jsx@6.7.5
│ └─┬ babel-plugin-transform-react-jsx-source@6.5.0
├─┬ react@0.14.8
├── react-addons-css-transition-group@0.14.8
├── react-addons-test-utils@0.14.8
├── react-dom@0.14.8
├─┬ react-loader@2.2.0
├─┬ react-redux@4.4.1
│ ├── hoist-non-react-statics@1.0.5
├── react-router@1.0.3
├─┬ react-select@1.0.0-beta12
│ └── react-input-autosize@0.6.10
│ ├─┬ react-json-tree@0.1.9
│ ├─┬ react-mixin@1.7.0
│ └── react-redux@3.1.2
│ └── react-lazy-cache@3.0.1
4

3 回答 3

0

这肯定会奏效 

ReactDOM.findDOMNode(this.refs.start).value;
于 2016-04-11T05:05:17.017 回答
0

你有没有尝试过这样的事情：

  import ReactDOM from 'react-dom'
const start = _.isEmpty(ReactDOM.findDOMNode(this.refs.start).value) ? null : ReactDOM.findDOMNode(this.refs.start).value
    const end = _.isEmpty(ReactDOM.findDOMNode(this.refs.end).value) ? null : ReactDOM.findDOMNode(this.refs.end).value

我上你的课，你的裁判工作我做了这个简单的测试：

import React, { PropTypes, Component } from 'react'
import _ from 'lodash'

export default class RangeQuery extends React.Component {


    handleChange(ev) {


        const start = _.isEmpty(this.refs.start.value) ? null : this.refs.start.value
        const end = _.isEmpty(this.refs.end.value) ? null : this.refs.end.value
        console.log("start")
        console.log(start)


        console.log("end")
        console.log(end)
    }

    render() {
        return (
            <div>
                <input className="form-control" type="text" ref="start" onChange={::this.handleChange} placeholder="min" />
                <input className="form-control" type="text" ref="end"   onChange={::this.handleChange} placeholder="max" />
            </div>
        )
    }
}

唯一的区别是我补充说：export default在上课之前告诉我它是否有帮助

于 2016-04-06T20:22:36.170 回答
0

目前尚不清楚问题出在哪里，这听起来仍然像是 React 的重复副本，但一种解决方法是使用函数 ref 样式，无论如何它都是首选样式：

<input ref={(node) => this.startInput = node} />

然后就可以访问了this.startInput.value。

于 2016-04-07T07:10:45.363 回答