Question

我是React的新手，这是我有史以来第一篇SO文章。我找到了一个很棒的类似Combo-Box的React / Material-UI组件。但是，我的应用程序使用类组件，而这个组件是一个功能组件...尝试包括该组件时，类组件很麻烦，因为它使用了用于样式化和管理状态的钩子，而这些钩子仅在功能组件中才允许使用。因此，我将其转换为类组件。问题是，类组件不会将光标聚焦在允许我键入TextField上。

除了并比较CSS之外，我还通过调试器中的并排模式遍历了Javascript代码，试图找出功能（工作）与类（不工作）组件的不同之处。我没有看到任何差异，所以很明显我在找错地方了。

在调试器中，我可以在onControlMouseDown的react-select js代码中看到调用了_this.focusInput();的那个时刻，此时光标集中在输入中领域。但是，一旦我按下Go并完成重新渲染，光标就不再存在，并且我的键入也将被完全忽略，这与相同组件的功能版本不同，在重新渲染后光标仍保留在该组件的功能版本中。

还尝试在输入组件上设置属性，例如autoFocus=true，disabled=false等。

1）功能代码沙盒（有效）：https://codesandbox.io/embed/material-demo-4fgow

2）类CodeSandbox（无效）：https://codesandbox.io/embed/ecstatic-frog-87b8r

下面将我将2个组件与调试器进行比较的react-select代码的片段。请注意，openMenuOnClick在工作实例和非工作实例中均适用，this.state.isFocused在false中均适用-唯一不同的是最终行为。

_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onControlMouseDown", function (event) {
    var openMenuOnClick = _this.props.openMenuOnClick;

    if (!_this.state.isFocused) {
        if (openMenuOnClick) {
            _this.openAfterFocus = true;
        }
        _this.focusInput();
    } else if (!_this.props.menuIsOpen) {
        if (openMenuOnClick) {
            _this.openMenu('first');
        }

我希望能够键入此组件，并让它为我提供包含我键入的内容的选择，但是我根本无法键入它-光标无法聚焦。

将React，Material-UI功能组件转换为类组件时遇到问题

0 个答案: