如何修改 outlook 插件中的 office.js 反应元素？

Question

使用新的 office.js，特别是 MS 团队提供的 ReactJS 脚手架。

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

如果我在标准 react return 中创建多个 react 元素，例如，

<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" />

然后如何以编程方式访问特定的 UI 元素，例如 Date 并修改值？

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}
          />
        );
    }
}

如何修改 outlook 插件中的 office.js 反应元素？

How to modify a office.js react element in outlook addin?

javascript

office-addins

outlook-addin

reactjs