React获取子组件的ref

Question

比如我想点击下一步去验证用户选择了哪一个，那么必须要获取真实dom去查看这几个li里的_active 也就是选中的那一个，那么在主组件里怎样获取子组件里定义的ref呢？

通过网上说的子组件向父组件传递值的方式吗？总感觉有点麻烦呀

Answer 1

react中改变都是通过state 状态的改变而改变，
你的这个active的class应该是给每个li都写上一个判断的状态
例如
如果你的这个li是循环出来的，事件也就是循环加的

< li onClick={this.handle.bing(this,index)}

index是key值

this.state.click == '1' ? 'active' : null

点击事件

handle(index){
    this.setState({click:index})
}

这样的话就可以知道点击哪个了，因为你知道了key值

在比如这个是你的子组件，你需要在父组件得到点击了哪个，直接在父组件的字组件

<div>
    <zizujian ref="com"></zizujian>  //或者在字组件的最外层写ref="com"
</div>

在父组件中提交的函数中打印

submit(){
    console.log(this.refs.com)
}

你就可以查看到这个子组件里面的所有东西，需要什么就写什么就可以了
例如this.refs.com.什么什么的，就像是取json一样

Answer 2

为什么要通过dom去判断呢？完全可以通过state去判断啊。
你可以通过子组件更改父组件的state你也可以直接通过子组件自己的state来实现啊。

通过this.refs.组件ref.state.自定义state的方式可以获取子组件内部的state。

你也可以通过<子组件 changeState={this.changeStateHandle}/>的方式，让子组件调用这个changeStateHandle 来实现啊。

尽可能的不要在用原来操作dom的去实线react的业务了。因为这几乎是不可控的。既然选择了react就用它自身的state来帮你完成，岂不是更好？

以上

Answer 3

所以我说过是要思想上的转变~

必须要获取真实dom去查看这几个li里的_active 也就是选中的那一个

这句话就说明一个问题.

比如说这个组件叫A,
你在调用的时候指定ref=AA,
当选中其中某个的时候,
写在onClick事件里, 点击同时写入一个状态this.setState({某个状态: 某个值}),
父组件中调用的时候如果只需要获取这个值,
直接this.refs.AA.state.某个状态, 直接可以拿到组件实例中的某个state.
所以完全没必要去 取dom的某些属性.