在redux调度完成后关注输入

Question

我正在使用React和Redux动态创建输入列表.单击按钮后,输入将添加到列表末尾.我需要关注最后添加的输入.我尝试了这个代码,但它集中了倒数第二个输入

const mapDispatchToProps = (dispatch, ownProps) => ({
    onOptionsChange: (newOptions) => {
        dispatch(formActions.updateOptions(newOptions));
    }
});

...
this.props.onOptionsChange({ ...this.props, inputsList}); // change list of inputs
ReactDOM.findDOMNode(this.inputs[this.props.choices.length - 1]).focus();

在日志中,我可以看到在更新状态的props之前执行focus().我该如何等待派遣完成？

Answer 1

为元素创建新的包装组件input。该组件在渲染时将自动对焦。

class Input extends React.Component {
    keepRef = (ref) => {
        this.ref = ref;
    }

    componentDidMount() {
        this.ref.focus();
    }

    render () {
        return (
            <input ref={this.keepRef} {...this.props} />
        )
    }
}

如果您不希望Input组件处理焦点，请将逻辑移至其父级。