Question

嗨，大家好，我是新来对js的蜜蜂。我有具有ref属性的可重用组件。当我将 _ref 道具值传递给 Reusablecomponent 时。我没有正确的ref值。我在下面的代码中嘲笑了同样的东西（可重用组件中获得了什么值）。

可重复使用的组件

     class A extends React.Component {
        constructor(props){
        super(props)
        ...
        }
    componentDidMount() {
//TypeError: Cannot read property 'focus' of undefined
        if (this.props._ref && !this.props._ref.disabled) {
            this.props._ref.current.focus();
            this.props._ref.current.select();
        }
     }
        render(){

        //If I console.log of this.props._ref . 
        //I got function like function (input) { return this2.firstField  = input  }
        //If i try to do any focus () or select() method I got an error with msg 
        // Focus or select method is not a function 

        return(
        <div>
        <input  type="text" ref={this.props._ref} value = {this.props.value}  />
        </div>
        )
        }

自己的组件

class own extends React {
constructor(props){
super(props);
}

handleChange = () => {
//I need to check the cursor . where its reside if the cursor in first input field I need to disable the button like I have requirement . 
}

render(){

return(
<A value = {"userName"} _ref = {input => this.firstField = input }/>
)

}
}

正如我提到的情况一样，我不知道如何执行此操作。我是否可以使用handleChange方法？。请引导我。

Answer 1

如ReactJs文档中所述：

将ref传递给render中的元素时，将引用该节点可以通过引用的 current 属性访问。

尝试使用this.props._ref.current.focus()

如何在React JS中的可重用组件中获取引用

1 个答案: