语义中永远不会获取 Popup 中的输入引用 UI React

Question

我在语义 UI React 中有一个包含输入字段的简单弹出窗口。打开弹出窗口时，应立即聚焦此输入字段。到目前为止没有运气。这是我试过的：

import * as React from 'react';
import { Input, Label, Popup, Segment } from 'semantic-ui-react';

export class Test extends React.Component {
    private searchInput: React.RefObject<Input>;

    constructor(props: any) {
        super(props);
        this.searchInput = React.createRef();
    }

    public render() {
        return (
            <Popup
                trigger={<Label>Test</Label>}
                content={this.renderSelector()}
                on="hover"
                hoverable={true}
                position="bottom left"
                onOpen={() => this.focusInput()}
            />
        )
    }

    private renderSelector() {
        return (
            <Segment>
                <Input ref={this.searchInput} fluid={true} icon="search" iconPosition="left" />
            </Segment>
        )
    }

    private focusInput() {
        if (this.searchInput.current) {
            this.searchInput.current.focus()
        }
    }
}

this.searchInput.current 始终为空。我还尝试将输入包装在 Ref 组件中，但结果相同：

    private renderSelector() {
        return (
            <Segment>
                <Ref innerRef={this.searchInput}>
                    <Input fluid={true} icon="search" iconPosition="left" />
                </Ref>
            </Segment>
        )
    }

最后，即使尝试在 DOM 中查找输入，我也得到了一个空结果：

    private renderSelector() {
        return (
            <Segment>
                <Input id="foobar" fluid={true} icon="search" iconPosition="left" />
            </Segment>
        )
    }

    private focusInput() {
        const foo = document.getElementById("foobar");
        if (foo) {
            const bar = foo as HTMLInputElement;
            bar.focus();
        }
    }

知道我在这里遗漏了什么吗？

谢谢！

Answer 1

这是解决方案，如此处所回答：https://github.com/Semantic-Org/Semantic-UI-React/issues/3473

主要问题基本上是 ref 仅在提交阶段可用（包括 componentDidUpdate 方法）。

import * as React from 'react';
import { Input, Label, Popup, Segment } from 'semantic-ui-react';

interface TestState {
    isOpen: boolean;
}

export class Test extends React.Component<{}, TestState> {
    private searchInput: React.RefObject<Input>;

    constructor(props: any) {
        super(props);
        this.searchInput = React.createRef();
        this.state = { isOpen: false };
    }

    public componentDidUpdate(prevProps: any, prevState: TestState) {
        if (!prevState.isOpen && this.state.isOpen) {
            if (this.searchInput.current) {
                this.searchInput.current.focus();
            }
        }
    }

    public render() {
        return (
            <Popup
                trigger={<Label>Test</Label>}
                content={this.renderSelector()}
                on="hover"
                hoverable={true}
                position="bottom left"
                onMount={() => this.setState({ isOpen: true })}
                onUnmount={() => this.setState({ isOpen: false })}
            />
        )
    }

    private renderSelector() {
        return (
            <Segment>
                <Input ref={this.searchInput} fluid={true} icon="search" iconPosition="left" />
            </Segment>
        )
    }
}

语义中永远不会获取 Popup 中的输入引用 UI React

Input ref inside Popup is never acquired in Semantic UI React

typescript

reactjs

semantic-ui-react