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

Question

In the following code, I have a TextField that I want to force all UpperCase letters for the user when they are typing, as well as store the text that the user inputted. I can make the TextField all UpperCase but I wont be able to submit to Excel. I can make the TextField submit to Excel but then I can't have it change to all UpperCase. I have the UpperCase working and commented the submit to Excel codes out. How do I merge these codes together or value and onChange? I already have a function for two calls for onChange and tried to include the third line and it did not work.

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

After Zohaib's answer, I added className and css but it is not working. It is only adding uppercase to the label. Here is the link for TextField properties. 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}
  />

In taskpane.css

.uppercase {
    text-transform: uppercase;
 }

Zohaib Ijaz · Answer 1 · 2020-04-06T17:46:29.713

1

Here is sample code how you can achieve this

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

You can achieve this by doing the following changes:

Add css to show text in all caps. Added css for this text field e.g.

.uppercase {
   text-transform: uppercase;
}

And before adding value to exel or whatever you finally want to do, call

value = value.toUpperCase();

.uppercase {
  text-transform: uppercase;
}

<input class="uppercase" />

edited Apr 06 '20 at 17:46

answered Apr 06 '20 at 15:22

Zohaib Ijaz

21,926
7
38
60

thanks Zohaib! This works! However, I still would like the user to type in the TextField only in UpperCase as well. Is there a way to do this? – Ethan Apr 06 '20 at 16:00
if you add above `.uppercase` class to that input field, your input will be all caps – Zohaib Ijaz Apr 06 '20 at 16:03
please see the updated question at the bottom. What am i doing wrong? It is making the TextField label uppercase but not the TextField value – Ethan Apr 06 '20 at 16:09
@Ethan I've created a codesandbox https://codesandbox.io/s/brave-wood-qvqlq and updated the answer – Zohaib Ijaz Apr 06 '20 at 17:47

score 0 · Accepted Answer · answered Apr 06 '20 at 16:54

Figured it out. I was using declaring descriptionVal as a string when I should have put a "?" in the interface 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 });
  };
}

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

2 Answers2