Ошибка при использовании ссылок в React 0.14.8

Question

Я работаю над извлечением некоторого кода из своего приложения в пакет с открытым исходным кодом. Как мое приложение, так и мой пакет зависят от той же версии React, 0.14.8.

С тех пор как я переместил код в пакет (и сделал некоторые изменения кода), я не смог отобразить компонент, который использует refs. Я искал советы в течение нескольких часов, и это дало два основных советов:

1. Убедитесь, что реагирует версии не конфликтуют
2. Убедитесь, что компонент с рефами создаются в методе другого компонента визуализации

Насколько я могу судить, я удовлетворил оба критерия.

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(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's render method, or you have multiple copies of React loaded

Это делает, если я удалить refs= из input тегов, но я, очевидно, нужны те.

Я рассмотрел альтернативу написания редуктора для управления состоянием этих компонентов, но это тяжелая работа вокруг для чего-то, что должно работать.

Как я могу исправить мои ссылки, чтобы они работали правильно?

Update

В то время как я принял ответ на этот вопрос в связи с тем, что это позволило мне использовать рефов, как я хотел, вопрос все еще остается, почему это произошло, в первую очередь, и опрос говорит, что самым большим подозреваемым является несколько вариантов реагирования. Насколько я могу судить, это, похоже, не так.

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 

Answer 1

Неясно, в чем проблема, и это s до звучит как дублированных копий Реагировать, но один обходной путь будет использовать реф стиль функции, которая является предпочтительным стиль в любом случае идти вперед:

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

Тогда вы можете получить доступ к this.startInput.value.

Answer 2

ли вы пытались что-то вроде этого:

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 перед классом скажите мне, если это поможет

Answer 3

это, безусловно, работать

ReactDOM.findDOMNode(this.refs.start).value;