React中子组件的访问参考

Access refs of sub component in React

本文关键字：访问 参考 组件 React      更新时间：2023-09-26

如果我有一个组件:

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类

无需使用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>
)

检查这个代码依存

相关文章：