Как я могу добавить две функции для «значения» в TextField?

Question

В следующем коде у меня есть TextField, в котором я хочу принудительно ввести все буквы UpperCase для пользователя, когда они печатают, а также сохранить текст, введенный пользователем. Я могу сделать TextField полностью UpperCase, но я не смогу отправить в Excel. Я могу заставить TextField отправлять в Excel, но тогда я не могу изменить его на все UpperCase. У меня работает 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 });
  };
}

После ответа Зохайба я добавил 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}
  />

В области задач. 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 });
  };
}