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

希望这会有所帮助。谢谢！

反应Office js文本字段控制的组件

1 个答案: