没有setTimeout，带有focus（）的ref响应不起作用（我的示例）

小编典典

没有setTimeout，带有focus（）的ref响应不起作用（我的示例）

reactjs

我遇到了这个问题，如果我将其取出并且停止工作，则.focus()只能使用该问题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" />

渲染功能

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

阅读 285

2020-07-22

共1个答案

小编典典

在看到问题的更新之后，我意识到您已经将嵌套的HTML传递给了 render 函数，并且您感兴趣的input元素确实在调用ancestor元素的
componentDidMount 时不可用。如React v0.13 Change
Log中所述：

ref解析顺序略有变化，因此在componentDidMount调用组件的方法后，即可立即获得对组件的引用；仅当您的组件在内调用父组件的回调时才应观察到此更改componentDidMount，这是一种反模式，无论如何都应避免

这是你的情况。因此，无论你的HTML结构分解成单独渲染的元素，如所描述这里，然后你就会访问自己的输入元素 componentDidMount 回调; 或者您只是坚持使用自己的计时器。

使用 componentDidMount 确保只有当组件的代码运行 在调用它 的安装（见引自文档进一步下跌）。

注意不建议调用
React.findDOMNode ：

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

注意

findDOMNode()是用于访问底层DOM节点的转义图案。在大多数情况下，不建议使用此逃生阴影，因为它会穿透组件抽象。

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

并且从ref字符串属性的文档中：

将ref属性分配给从render以下内容返回的任何内容：
 <input ref="myInput" />
在其他一些代码（通常是事件处理程序代码）中，通过如下方式访问 支持实例this.refs：
var input = this.refs.myInput;
var inputValue = input.value;
var inputRect = input.getBoundingClientRect();

另外，您可以消除对代码的需求，并使用JSX autoFocus属性：

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

2020-07-22