如果没有setTimeout，react ref with focus（）将无法工作（我的示例）

Question

我遇到了这个问题，. point（）只适用于setTimeout，如果我把它拿出来，它停止工作问题。

    componentDidMount() {
        React.findDOMNode(this.refs.titleInput).getElementsByTagName('input')[0].focus();
    }

使用setTimeout的示例

componentDidMount() {
    setTimeout(() => {
        React.findDOMNode(this.refs.titleInput).getElementsByTagName('input')[0].focus();
    }, 1);
}

JXS

<input ref="titleInput" type="text" />

我已经按照这个例子React集中在渲染后的输入

渲染函数

render() {
        const {title, description, tagtext, siteName} = (this.state.selected !== undefined) ? this.state.selected : {};
        const hasContentChangedYet = this.hasContentChangedYet(title, description);

        return (
            <div>
                <h2 className={styles.formMainHeader}>Edit Meta-Data Form</h2>
                <table className={styles.formBlock}>
                    <tbody>
                    <tr>
                        <td className={styles.tagEditLabel}>
                            Tag
                        </td>
                        <td className={styles.inputFieldDisableContainer}>
                            {tagtext}
                        </td>
                    </tr>
                    <tr>
                        <td className={styles.tagEditLabel}>
                            Site
                        </td>
                        <td className={styles.inputFieldDisableContainer}>
                            {siteName}
                        </td>
                    </tr>
                    <tr>
                        <td className={styles.tagEditLabel}>
                            Title
                        </td>
                        <td className={styles.inputFieldContainer}>
                            <ReactInputField
                                ref="titleInput"
                                id="title"
                                defaultValue={(title) ? title : ''}
                                onChange={this.onInputChange}
                                placeholder="Title"
                                clearTool={true} />
                        </td>
                    </tr>
                    <tr>
                        <td className={styles.tagEditLabel}>
                            Description
                        </td>
                        <td className={styles.inputFieldContainer}>
                            <ReactInputField
                                id="description"
                                defaultValue={(description) ? description : ''}
                                onChange={this.onInputChange}
                                placeholder="Description"
                                clearTool={true} />
                        </td>
                    </tr>
                    </tbody>
                </table>

                <div className={styles.formFooter}>
                    <button id="save-button" className={styles.saveButton} disabled={!hasContentChangedYet} onClick={() => this.handleSavePressed()}>
                        Save
                    </button>
                    <button id="form-cancel-button" className={styles.cancelButton} onClick={this.actions.form.cancelUpdateToTagData}>
                        Cancel
                    </button>

                </div>
            </div>
        );
    }

Answer 1

在父组件中，我呈现一个包含InputText的primereact对话框：

<Dialog visible={this.state.visible} ...>
  <InputText ref={(nameInp) => {this.nameInp = nameInp}} .../>
  ...
</Dialog>

最初，this.state.visible为false，对话框被隐藏。为了显示对话框，我通过调用showDlg（）重新呈现父组件，其中nameInp是对InputText的引用：

showDlg() {
  this.setState({visible:true}, ()=>{
    this.nameInp.element.focus();
  });
}

在某些情况下，您可以简单地使用：

componentDidUpdate(){
  this.nameInp.element.focus();
}

但是，每次（重新）渲染组件时都会调用componentDidUpdate（），包括在InputText隐藏的情况下。

另见：https://reactjs.org/docs/react-component.html#setstate

Answer 2

在看到问题的更新之后，我意识到您已经将嵌套的HTML传递给了呈现函数，并且您感兴趣的输入元素在对祖先元素进行componentDidMount调用时确实不可用。如React v0.13变更日志所述：

ref解析顺序发生了轻微的变化，这样在调用组件的组件的didMount方法后，组件的ref立即可用；只有当您的组件在您的组件的didMount中调用父组件的回调时，才能观察到此更改，这是一种反模式，无论如何都应该避免

这是你的案子。因此，或者您必须将HTML结构分解为单独呈现的元素，如本文所述，然后您将在其自己的componentDidMount回调中访问输入元素；或者你只是坚持你的计时器。

使用componentDidMount可以确保代码仅在调用它的组件被装入时运行（请参阅下面文档中的引用）。

请注意，不鼓励调用React.findDOMNode：

在大多数情况下，您可以将ref附加到DOM节点，并完全避免使用findDOMNode。

注意事项

findDOMNode（）是用于访问底层DOM节点的转义图案填充。在大多数情况下，不鼓励使用此转义图案填充，因为它会穿透组件抽象。

findDOMNode（）仅适用于已安装的组件（即已放置在DOM中的组件）。如果您尝试在尚未挂载的组件上调用此项（如在尚未创建的组件上调用findDOMNode（）中的render（）），则会引发异常。

以及来自ref string属性上的文档：

>

将ref属性分配给从渲染返回的任何内容，例如：

 <input ref="myInput" />

在其他一些代码（通常是事件处理程序代码）中，通过this.refs访问后备实例，如：

var input = this.refs.myInput;  
var inputValue = input.value;  
var inputRect = input.getBoundingClientRect();  

或者，您可以消除对代码的需要，并使用JSXautoFocus属性：

<ReactInputField
        ref="titleInput"
        autoFocus
        ... />