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

这不起作用，因为裁判似乎不会转移到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

在React中访问子组件的引用

1 个答案: