React Office js文本字段控制的組件

Question

我試圖在其中使用officejs react組件，並且由於osme的原因，我無法使其正常工作。.有效的是代碼。 它可以在Codepen中工作，但是當我將相同的代碼放在excel插件項目中時，我無法在文本字段中獲取值。 Codepen中的代碼（有效）：

[ https://codepen.io/manish_shukla01/pen/ReWWmM][1]

應用程序文件中我項目中的代碼（從某種意義上講，不會觸發handlechange事件，因此無法正常工作，我相信我的state.value1的值即使在我輸入任何內容時也保持空白）：

import * as React from 'react';
import { Button, ButtonType } from 'office-ui-fabric-react';
import Header from './Header';

import { TextField } from 'office-ui-fabric-react/lib/TextField';

import * as OfficeHelpers from '@microsoft/office-js-helpers';

export default class App extends React.Component<any,any,any>{

constructor(props) {
    super(props);
    this.state = {

                value1: '',
                 value2:'',
                 message:'Helloooo'
                 };

    this.handleChange1 = this.handleChange1.bind(this);
    this.handleChange2 = this.handleChange2.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange1(event) {
    this.setState({value1: event.target.value});


  }
    handleChange2(event) {
    this.setState({value2: event.target.value});

  }



  handleSubmit = async () => {
    event.preventDefault();
    this.setState({message: 'i got clicked'});
    try {
        //event.preventDefault();

        await Excel.run(async context => {
            /**
             * Insert your Excel code here
             */
            const range = context.workbook.getSelectedRange();

        // Read the range address
        range.load('address');

        // Update the fill color
        range.format.fill.color = 'blue';

        range.values = [[this.state.value2]];



        await context.sync();
        console.log(`The range address was ${range.address}.`);
        });
    } catch(error) {
        OfficeHelpers.UI.notify(error);
        OfficeHelpers.Utilities.log(error);
    };
}

render() {

    return (
        <form className='ms-welcome'  onSubmit={this.handleSubmit}>
            <Header logo='assets/logo-filled.png' title='Excel Analytics' message={this.state.message} />

            <TextField label="field1" 
  value={this.state.value1} onChange={this.handleChange1} 
required
/>
<Button className='ms-welcome__action' buttonType={ButtonType.primary} 

    onClick={this.handleSubmit}>Run
    </Button>

        </form>
    );
}
}

Answer 1

我還遇到了Office UI Fabric TextField的“ onChange”事件的相同問題，並改用“ onChanged”解決了該問題，正如他們所說的那樣，它已被棄用。 但這對我有用。

首先，將onChanged處理函數添加到TextField，如下所示：

<TextField name="fieldName" label="field1" value={this.state.value1} onChanged={val => this.handleChange1("fieldName", val)} />

另外，請注意，已添加“名稱”屬性以標識handleChange1中的控件。

現在更改處理程序實現，如下所示：

handleChange1(name, value) {
    this.setState(prevState => ({
      result: {
          ...prevState.result,
          [name]: value
      }
    }));
  }

希望這可以幫助。 謝謝！