Question

我尝试使用refs是ReactJs，通过单击按钮来聚焦文本框。

但是我收到以下错误消息： -

bundle.js:114 Uncaught TypeError: Cannot read property 'focus' of undefined

源代码

class FocusText extends Component{

        handleClick(){
            this.refs.myTextInput.focus();
        }

        render(){
            return(
                <div>
                    <input type="text" ref="myTextInput"/>
                    <input type="button"
                           value="Focus the text input"
                           onClick={this.handleClick.bind(this)}/>
                </div>
            );
        }
    }

    React.render(<FocusText/>, document.getElementById('root'));

Answer 1

String refs已弃用，并且根据文档...

我们建议反对它，因为字符串引用有一些问题，是被认为是遗产，很可能会在未来之一被删除版本。

您应该使用callback ref代替。

将ref分配给实例上的属性：

<input type="text" ref={(input) => { this.myTextInput= input; }} />

使用ref：

handleClick(){
    this.myTextInput.focus(); // note that refs is no longer necessary 
}

Answer 2

尝试使用回调：

class FocusText extends React.Component{

        handleClick(){
            console.log(this.focus)
        }

        render(){
            return(
                <div>
                    <input type="text" ref={ focus => this.focus = focus }/>
                    <input type="button"
                           value="Focus the text input"
                           onClick={this.handleClick.bind(this)}/>
                </div>
            );
        }
    }

    React.render(<FocusText/>, document.getElementById('app'));

来自React文档：

如果你以前使用过React，你可能熟悉一个旧的API，其中ref属性是一个字符串，如“textInput”，DOM节点作为this.refs.textInput访问。我们建议不要使用它，因为字符串引用有一些问题，被认为是遗留问题，很可能会在未来的某个版本中删除。如果您当前正在使用this.refs.textInput访问引用，我们建议使用回调模式。

https://facebook.github.io/react/docs/refs-and-the-dom.html

Answer 3

与其他人所说的一样，字符串引用已被弃用。

然而现在它仍然可以使用字符串ref，但在最后一行我将使用ReactDOM

ReactDOM.render(<FocusText />, document.getElementById("root"));

在您的代码中，您没有使用ReactDOM。这有什么理由吗？

请参阅CodePen

ReactJs使用refs聚焦输入

3 个答案: