рефов доступа к югу компоненты в React

Question

Если у меня есть компонент, как:

class Sliders extends React.Component { 
    render() { 
    return (
     <div> 
     <Slider ref="first" update={this.props.update} /> 
     <Slider ref="second" update={this.props.update} /> 
     <Slider ref="third" update={this.props.update} /> 
     </div> 
    ) 
    } 
} 

и я хочу, чтобы создать еще один компонент, который обращается значением, используя его исй, есть способ сделать это?

class App extends React.Component { 
    sliderUpdate(){ 
     console.log(ReactDOM.findDOMNode(this.refs.third).value) 
    } 
    render() { 
     return (
      <div> 
       <Sliders update={this.sliderUpdate} /> 
      </div> 
     ) 
    } 
} 

это не работает, потому что похоже, что ссылки ref не переносятся на класс App.

Answer 1

Это можно решить без использования refs.

Пример кода будет ниже,

const handleChange = (val) => (
    console.log(val) 
) 
const Application =() => (
    <div> 
    <Slider handleChange={handleChange} /> 
    </div> 
); 

const Slider = (props) => (
    <div> 
    <input type="text" placeholder="typesomething" onChange={(e) => props.handleChange(e.target.value)}></input> 
    </div> 
) 

Проверить это codepen