Как изменить элемент реагирования office.js в надстройке Outlook?

Question

Использование нового office.js, в частности скаффолдинга ReactJS, предоставленного командой MS.

https://developer.microsoft.com/en-us/fabric/#/controls/web

Если я создаю несколько реактивных элементов в стандартном реактивном возврате, например,

<TextField label="Date:" disabled styles={{ root: { width: 300 } }} defaultValue="Wednesday, May 8, 2019" />
<TextField label="Date2:" disabled styles={{ root: { width: 300 } }} defaultValue="Wednesday, May 9, 2019" />
<TextField label="Date3:" disabled styles={{ root: { width: 300 } }} defaultValue="Wednesday, May 10, 2019" />

Как получить доступ к конкретному элементу пользовательского интерфейса, напримерДата как программно и изменить значение?

Answer 1

Создайте ссылку на объект для компонента, после чего вы сможете получить доступ к его свойствам.Например:

class MyComponent extends React.Component<any> {
    private myTextBox = React.createRef<TextFieldBase>();
    
    constructor(props: any) {

        super(props);
    }
    
    readAProperty() {
      console.log(`Current value: {this.myTextBox.current.value}`);
    }

    render() {
        return (
          <TextField label="Date:" 
          disabled styles={{ root: { width: 300 } }} 
          defaultValue="Wednesday, May 8, 2019" 
          componentRef={this.myTextBox}
          />
        );
    }
}