訪問裁判在作出反應

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