访问裁判在作出反应

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> 
     ) 
    } 
} 

这不起作用，因为它看起来像裁判不会继承到应用程序类。

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