反应输入defaultValue焦点并选择

Question

我有一个带有input-element的组件，我使用defaultValue来设置初始值。 我想要关注该元素并最初选择整个值，但似乎在调用componentDidMount时未设置defaultvalue。

你有任何提示吗？

我使用window.setTimeout但我想避免在我的react-components中使用它：

        public componentDidMount(): void {
        if (this.props.focus) {
            let tInput: HTMLInputElement = ReactDOM.findDOMNode(this).getElementsByTagName("input").item(0);
            if (tInput) {
                tInput.focus();
                // FixMe: defaultValue is set too late by react so i cant set selection instantly
                if (this.props.defaultValue) {
                    window.setTimeout(
                        () => {tInput.setSelectionRange(0, this.props.defaultValue.length); },
                        100
                    );
                }
            }
        }
    }

Answer 1

对我来说很好：

class MyComponent extends React.Component {

    componentDidMount () {
        const { myInput } = this.refs
        myInput.focus()
        myInput.select()
    }

    render () {
        return (
            <input type='text' defaultValue='Foobar' ref='myInput' />
        )
    }
}

除了render / renderToString之外，我不会使用任何reactDOM方法。这些apis是“逃生舱”，不推荐使用。