相关疑难解决方法(0)

在渲染组件后,将焦点设置在特定文本字段上的反应方式是什么？

文档似乎建议使用refs,例如:

ref="nameInput"在渲染函数的输入字段中设置,然后调用:

this.refs.nameInput.getInputDOMNode().focus(); 

但我应该在哪里打电话呢？我尝试了几个地方,但我无法让它工作.

我有遇到这样的问题,.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" />

我已经按照这个例子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}> …