SpinButton: публичное свойство 'value' не определено, а публичный метод 'focus ()' не является функцией - PullRequest
Новая
       9

SpinButton: публичное свойство 'value' не определено, а публичный метод 'focus ()' не является функцией

0 голосов
/ 13 декабря 2018

Я недавно начал с реактивом, машинописью и офисным пользовательским интерфейсом.Но я уже борюсь с одним из компонентов из ткани.В этом примере у меня есть простой компонент Product с SpinButton и DefaultButton.Когда нажата кнопка DefaultButton, я хочу получить значение SpinButton и установить фокус на нем.Чтобы получить члены интерфейса ISpinButton, я использую ссылку на React.RefObject.Мой код выглядит следующим образом: 

import * as React from 'react';

import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
import { SpinButton } from 'office-ui-fabric-react/lib/SpinButton';

class Product extends React.Component<{}, {}> {

    private spbStockRef: React.RefObject<SpinButton> = React.createRef<SpinButton>();

    public render(): JSX.Element {
        return (
            <React.Fragment>
                <SpinButton
                    ref={this.spbStockRef}
                    defaultValue="0"
                    label={'Stock '}
                    min={0}
                    max={99999}
                    step={1}
                    onFocus={() => console.log('onFocus called')}
                    onBlur={() => console.log('onBlur called')} />
                <DefaultButton onClick={this.onButtonClick} />
            </React.Fragment>)
    }

    private onButtonClick = (e: React.MouseEvent<HTMLButtonElement>) => {
        const node = this.spbStockRef.current!;

        if (node) {
            console.log(node.value);
            node.focus();
        }
    }
}
export default Product;

Внутри onButtonClick Intellisense Visual Studio предлагает и 'value' и 'focus ()' для переменной узла, поэтому фактические члены ISpinButton должны быть доступны.

Но когда нажата кнопка, console.log (node.value) выдает undefined , и на node.focus () выводится ошибка TypeError: Ошибка TypeEr: узел.focus не является функцией .Я также хочу упомянуть, что console.log (node) выводит правильный экземпляр объекта, поэтому ссылка работает правильно.

Есть идеи, что я здесь не так делаю?В примерах компонента SpinButton также ничего не указано, как заставить это работать.

https://developer.microsoft.com/en-us/fabric?example=#/components/spinbutton

Спасибо

Ответы [ 2 ]

0 голосов
/ 13 декабря 2018

Вдохновленный на Boy With Silver Wings его ответ я нашел обходной путь.Вместо использования определенного типа для RefObject я просто объявил его как any , а затем смог использовать componentRef.Поэтому в основном мне пришлось переопределить требуемый тип (component ?: ISpinButton | null) => void componentRef, чтобы он работал.Я не знаю, следует ли сообщать об этом как об ошибке. 

import * as React from 'react';

import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
import { SpinButton } from 'office-ui-fabric-react/lib/SpinButton';

class Product extends React.Component<{}, {}> {

    private spbStockRef: any = React.createRef();

    public render(): JSX.Element {
        return (
            <React.Fragment>
                <SpinButton
                    componentRef={this.spbStockRef}
                    defaultValue="0"
                    label={'Stock '}
                    min={0}
                    max={99999}
                    step={1}
                    onFocus={() => console.log('onFocus called')}
                    onBlur={() => console.log('onBlur called')} />
                <DefaultButton onClick={this.onButtonClick} />
            </React.Fragment>)
    }

    private onButtonClick = (e: React.MouseEvent<HTMLButtonElement>) => {
        const node = this.spbStockRef.current!;

        if (node) {
            console.log(node.value);
            node.focus();
        }
    }
}
export default Product;
0 голосов
/ 13 декабря 2018

Для fabric-ui, чтобы прикрепить ссылку к внутреннему элементу, а не к компоненту, вы можете использовать componentRef

Это создаст код для SpinButton: 

<SpinButton
   componentRef={this.spbStockRef}
   defaultValue="0"
   label={'Stock '}
   min={0}
   max={99999}
   step={1}
/>


const { SpinButton } = window.Fabric;

class App extends React.Component {
  spinBtn = React.createRef();
  componentDidMount() {
    this.spinBtn.current.focus();
  }
  render() {
    return (
      <SpinButton
        defaultValue="0"
        label={'Basic SpinButton:'}
        min={0}
        max={100}
        step={1}
        componentRef={this.spinBtn}
        iconProps={{ iconName: 'IncreaseIndentLegacy' }}
      />
    );
  }
}

const root = document.getElementById("root");
ReactDOM.render(<App />, root);
<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/9.6.1/css/fabric.min.css">
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="//unpkg.com/office-ui-fabric-react/dist/office-ui-fabric-react.min.js"></script>
<div id="root"></div>
...