如何在 TextField 中为“值”添加两个函数？

Question

在下面的代码中，我有一个 TextField，我想在用户键入时强制为用户输入所有大写字母，并存储用户输入的文本。我可以将 TextField 全部设为大写，但我无法提交到 Excel。我可以将 TextField 提交到 Excel，但不能将其更改为全部大写。我有大写的工作并注释了提交到 Excel 代码。如何将这些代码合并在一起或 value 和 onChange？我已经有两个调用 onChange 的函数，并尝试包含第三行，但它不起作用。

import * as React from "react";
import { TextField, PrimaryButton } from 'office-ui-fabric-react/lib/';


export interface ParentState  {
  [key: string]: ParentState[keyof ParentState];
  //dataGoToExcel?;
  multiline: boolean;
  descriptionVal: string;
};

export default class ParentComponent extends React.Component<{}, ParentState> {
  constructor(props, context) {
    super(props, context);
    this.state = {
      //dataGoToExcel: '',
      multiline: false,
      descriptionVal: '',
    };
  }
    handleChange2 = (event) => {
        this.setState({dataGoToExcel: event.target.value})
    };

    addToBOM = async () => {
      try {
        await Excel.run(async context => {
          const range = context.workbook.getSelectedRange();
         // const range1 = context.workbook.getActiveCell();
          range.load("address");
         // let newRange = (this.state.dataGoToExcel);
         // range1.values = newRange;
          range.format.fill.color = "yellow";
          await context.sync();
          console.log(`The range address was ${range.address}.`);
        });
      } catch (error) {
        console.error(error);
      }
      this.setState({
        //dataGoToExcel: '',
        descriptionVal: '',
      })
    };
render(){
  this.handleChange = this.handleChange.bind(this);
    return(
    <div>
      <TextField 
        label="Data to Go to Excel"
        type="text"
        styles={{ root: { width: 225 } }}
        onChange={this.twoCalls}
        //onChange={this.handleChange2}
        value={this.state["descriptionVal"]}
        //value={this.state.dataGoToExcel}
        multiline={this.state.multiline}
      />
      <PrimaryButton 
        text="Enter"
        onClick={this.addToBOM}
      />
    </div>
      );
   }
   twoCalls2 = () => {  //this currently isnt running
    //this.state.dataGoToExcel();
    this.state["descriptionVal"];
}

   twoCalls = (e: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newText: string): void => {
    this.handleChange("descriptionVal")(e);

    this._onChange(e, newText);


}
private _onChange = (e: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newText: string): void => {
  const newMultiline = newText.length > 25;
  console.log(e)
  if (newMultiline !== this.state.multiline) {
    this.setState({ multiline: newMultiline });
  }
};
handleChange = (field: string) => (event: any) => {
  const fieldVal = event.target.value.toUpperCase();
  this.setState({ [field]: fieldVal });
  };
}

在 Zohaib 的回答之后，我添加了 className 和 css 但它不起作用。它只是在标签上添加大写字母。这是 TextField 属性的链接。 https://developer.microsoft.com/en-us/fluentui#/controls/web/textfield

  <TextField 
    className="uppercase"
    label="Data to Go to Excel"
    type="text"
    styles={{ root: { width: 225 } }}
    onChange={this.handleChange2}
    value={this.state.dataGoToExcel}
    multiline={this.state.multiline}
  />

在taskpane.css中

.uppercase {
    text-transform: uppercase;
 }

Answer 1

这里是示例代码如何实现这一点

https://codesandbox.io/s/brave-wood-qvqlq

您可以通过以下更改来实现此目的：

添加 css 以显示全部大写的文本。为此文本字段添加了 css，例如

.uppercase {
   text-transform: uppercase;
}

在为 exel 增加价值或你最终想做的任何事情之前，调用

value = value.toUpperCase();

.uppercase {
  text-transform: uppercase;
}

<input class="uppercase" />

Answer 2

想通了。当我应该放一个“？”时，我正在使用将 descriptionVal 声明为字符串。在ParentState接口中。

import * as React from "react";
import { TextField, PrimaryButton } from 'office-ui-fabric-react/lib/';


export interface ParentState  {
  [key: string]: ParentState[keyof ParentState];
  multiline: boolean;
  descriptionVal?;
};

export default class ParentComponent extends React.Component<{}, ParentState> {
  constructor(props, context) {
    super(props, context);
    this.state = {
      multiline: false,
      descriptionVal: '',
    };
  }

    addToBOM = async () => {
      try {
        await Excel.run(async context => {
          const range = context.workbook.getSelectedRange();
          const range1 = context.workbook.getActiveCell();
          range.load("address");
          let newRange = (this.state.descriptionVal);
          range1.values = newRange;
          range.format.fill.color = "yellow";
          await context.sync();

          console.log(`The range address was ${range.address}.`);
        });
      } catch (error) {
        console.error(error);
      }
      this.setState({
        descriptionVal: '',
      })
    };
render(){
  this.handleChange = this.handleChange.bind(this);
    return(
    <div >
      <TextField 
        label="Data to Go to Excel"
        type="text"
        styles={{ root: { width: 225 } }}
        onChange={this.twoCalls}
        value={this.state["descriptionVal"]}
        multiline={this.state.multiline}
      />
      <PrimaryButton 
        text="Enter"
        onClick={this.addToBOM}
      />
    </div>
      );
   }
   twoCalls2 = () => { 
    this.state.dataGoToExcel();
    this.state["descriptionVal"];
}

   twoCalls = (e: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newText: string): void => {
    this.handleChange("descriptionVal")(e);

    this._onChange(e, newText);


}
private _onChange = (e: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newText: string): void => {
  const newMultiline = newText.length > 25;
  console.log(e)
  if (newMultiline !== this.state.multiline) {
    this.setState({ multiline: newMultiline });
  }
};
handleChange = (field: string) => (event: any) => {
  const fieldVal = event.target.value.toUpperCase();
  this.setState({ [field]: fieldVal });
  };
}