javascript - 在 React 中访问子组件的 refs

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

我想设置另一个组件来使用它的 ref 访问该值，有没有办法做到这一点？

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

这不起作用，因为似乎 refs 没有延续到 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>
)

检查这个代码笔