Reactjs 如何为“添加”添加两个函数；“价值”；在TextField？

在下面的代码中，我有一个TextField，我想在用户键入时强制用户使用所有大写字母，并存储用户输入的文本。我可以使文本字段全部大写，但我将无法提交到Excel。我可以将文本字段提交到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 });
  };
}

---

下面是如何实现这一点的示例代码

您可以通过执行以下更改来实现这一点：

添加css以在所有大写字母中显示文本。为该文本字段添加了css，例如

.uppercase {
   text-transform: uppercase;
}

在给exel增加价值或做任何你最终想做的事情之前，打电话给

value = value.toUpperCase();

。大写{
文本转换：大写；
}

---

找到了答案。当我应该在接口ParentState中放置一个“？”时，我正在使用声明descriptionVal作为字符串

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

import*as React from“React”；
从“office ui fabric react/lib/”导入{TextField，PrimaryButton}；
导出接口父状态{
[key:string]：ParentState[keyof ParentState]；
多行：布尔；
描述值？；
};
导出默认类ParentComponent扩展React.Component{
构造函数（道具、上下文）{
超级（道具、背景）；
此.state={
多行：false，
descriptionVal:“”，
};
}
addToBOM=async（）=>{
试一试{
等待Excel.run（异步上下文=>{
const range=context.workbook.getSelectedRange（）；
const range1=context.workbook.getActiveCell（）；
加载范围（“地址”）；
让newRange=（this.state.descriptionVal）；
range1.values=新范围；
range.format.fill.color=“黄色”；
wait context.sync（）；
log（`范围地址是${range.address}.`）；
});
}捕获（错误）{
控制台错误（error）；
}
这是我的国家({
descriptionVal:“”，
})
};
render（）{
this.handleChange=this.handleChange.bind（this）；
返回(
);
}
twoCalls2=（）=>{
this.state.dataGoToExcel（）；
此.state[“descriptionVal”]；
}
twoCalls=（e:React.FormEvent，newText:string）：void=>{
本手册更改（“描述值”）（e）；
这一变化（e，新文本）；
}
private\u onChange=（e:React.FormEvent，newText:string）：void=>{
const newMultiline=newText.length>25；
控制台日志（e）
if（newMultiline！==this.state.multiline）{
this.setState（{multiline:newMultiline}）；
}
};
handleChange=（字段：字符串）=>（事件：任意）=>{
const fieldVal=event.target.value.toUpperCase（）；
this.setState（{[field]：fieldVal}）；
};
}

谢谢Zohaib！这管用！但是，我仍然希望用户只在文本字段中键入大写字母。有什么方法可以做到这一点吗？如果您将上述

.uppercase

类添加到该输入字段中，您的输入将全部为caps请参见底部更新的问题。我做错了什么？它使TextField标签大写，而不是TextFieldvalue@Ethan我已经创建了一个代码沙盒并更新了答案

value = value.toUpperCase();

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