如何在 TextField 中为 "value" 添加两个函数？

Question

在下面的代码中，我有一个 TextField，我想在用户输入时强制所有字母大写，并存储用户输入的文本。我可以让 TextField 全部大写，但我无法提交到 Excel。我可以让 TextField 提交到 Excel 但我不能将它更改为所有大写。我有 UpperCase 工作并评论了提交到 Excel 代码。如何将这些代码合并在一起或将值和 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 属性的 link。 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 });
  };
}

如何在 TextField 中为 "value" 添加两个函数？

How Can I Add Two Functions for "value" in TextField?

textfield

typescript

reactjs

office-js

tsx