Использование refs для доступа к компонентам в React

Question

Я следую учебнику, чтобы понять, как работает React.js. Я застрял, используя ссылки для доступа к компонентам. Если кто-то не возражает против того, чтобы посмотреть мой код и сказать мне, где я ошибаюсь. Но это то, что я сделал. У меня есть общий компонент App и html Input тег, который обновляет refs в State. Но, я не знаю, почему он все еще показывает undefined

import React from 'react'; 
import ReactDOM from 'react-dom'; 

class App extends React.Component { 
    constructor() { 
    super(); 
    this.state = { 
     red: 0, 
     green: 0, 
     blue: 0 
    } 
    this.update = this.update.bind(this); 
    } 

    //To manage the state 
    update(e) { 
    this.setState({ 
     red: ReactDOM.findDOMNode(this.refs.red.refs.inp).value, 
     green: ReactDOM.findDOMNode(this.refs.green.refs.inp).value, 
     blue: ReactDOM.findDOMNode(this.refs.blue.refs.inp).value 
    }) 
    console.log(this.state); //<This is giving me Object {red: undefined, green: undefined, blue: undefined} 
    } 

    render() { 
    return (
     <div> 
     <Slider ref="red" update={this.update}/> 
     {console.log(this.state.red)} // This is undefined 
     {this.state.red} 
     <br /> 
     <Slider ref="green" update={this.update}/> 
     {console.log(this.state.green)} // This is undefined 
     {this.state.green} 
     <br /> 
     <Slider ref="blue" update={this.update}/> 
     {console.log(this.state.blue)} // This is undefined 
     {this.state.blue} 
     <br /> 
     </div> 
    ) 
    } 
} 

//Working with refs. Refs are a way of referencing components within our react application 
class Slider extends React.Component { 
    render() { 
    return (
     <div> 
     <input ref="inp" type="range" min="0" max ="255" onChange={this.props.update}/> 
     </div> 
    ) 
    } 
} 

ReactDOM.render(
    <App />, document.getElementById('app') 
); 

export default App; 

Answer 1

findDOMNode возвращает соответствующий нативный браузер DOM элемент, который находится в вашем случае:

<div> 
    <input type="range" min="0" max ="255" onChange={this.props.update} /> 
</div> 

Таким образом, вы читаете значение DIV вместо ввода.

Проверить это исправление http://jsfiddle.net/69r5kn16/2/

Answer 2

, если вы хотите использовать refs, вы должны использовать их после того, как ваш компонент был установлен, это означает, что вы должны использовать их в componentDidMount.

Я вижу, что вы звоните this.update в свой Slider Компонент. порядок componentDidMount детского компонента и parentComponent выглядит следующим образом:

componentWillMount Of parent 
componentWillMount of child 
componentDidMount of child 
componentDidMount of Parent. 

пожалуйста, проверьте, когда вы называете update метод в Slider компонента.

Answer 3

Согласно Реагировать doc:

Если вы не запрограммированы несколько приложений с React, ваш первый наклоном, как правило, будет пытаться использовать реф «делать вещи произойдет "в вашем приложении. Если это так, подумайте и подумайте о том, где должно принадлежать государство в иерархии компонентов. Часто становится ясно, что надлежащее место «владеть» этим состоянием находится на более высоком уровне в иерархии. Размещение государства часто устраняет любое желание использовать refs для «совершения вещей» - вместо этого поток данных обычно достигает вашей цели.

Попробуйте это:

class App extends Component { 

    constructor(){ 
     super(); 
     this.state = { 
      slider : 0, 
     } 
     this.update = (e) => { 
      const {name,value} = e.target; 
      this.setState({ 
       [name] : value, 
      }) 
     } 
    } 
    render() { 
     return (
      <div> 
       <Slider name="slider" update={this.update} /> 
       {this.state.slider} 
      </div> 
     ); 
    } 
} 

class Slider extends React.Component { 
    render() { 
      return (
      <div> 
       <input name={this.props.name} type="range" min="0" max="255" onChange={this.props.update}/> 
      </div> 
     ) 
    } 
}