react office js textfield控制组件

Question

我试着在里面使用officejs react组件，但是由于osme的原因，我不能让它工作，properly..effective，这是代码。它可以在codepen中工作，但当我将相同的代码放入excel addin项目中时，我无法在文本字段中获得值。codepen中的代码(它可以工作)：

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

app文件中我的项目中的代码(不起作用，因为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”来解决它，正如他们所说的那样，它已被弃用。但这对我很管用。

首先，在TextField中添加onChanged处理程序，如下所示：

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

还要注意，添加"name“属性是为了标识handleChange1中的控件。

现在更改处理程序实现，如下所示：

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

希望这能有所帮助。谢谢!