Reactjs 处理更改输入反应JS+；打字错误 导出默认类triangleArea扩展React.Component{ 构造器（道具：triangleInfo）{ 超级（道具）； //将变量初始化为未定义 this.handleChange=this.handleChange.bind（this）； 此.state={ 基数：0， 高度:0,， 面积：未定义， 错误：“ }; } //处理输入底座和高度的变化 handleChange=（事件：React.ChangeEvent）=> { 这是我的国家({ 名称：event.target.value }); }//getArea函数来计算面积 getArea=async（triangleInfo）=>{ triangleInfo.preventDefault（）； 常量base=triangleInfo.target.elements.base.value； 常量高度=triangleInfo.target.elements.height.value； 如果（基础>0和高度>0） { 这是我的国家({ base:triangleInfo.target.elements.base.value， 高度：triangleInfo.target.elements.height.value， 面积：（基础*高度）/2 }) } 其他的 { 这是我的国家({ 基础：未定义， 高度：未定义， 面积：未定义， 错误：“请正确输入值。” }) } } render（）{ 返回( //...

计算三角形的底

获取区域 //... ); } }; 我目前被困在这里，收到以下错误消息：

类型“Readonly”上不存在属性“height”。ts（2339）

与基本输入相同。有什么帮助吗

您在哪里调用

getArea

由于您希望重用

handleChange

方法逻辑（这很好），因此您希望通过添加一个参数来正确地参数化

handleChange

，该参数告诉它绑定到哪个控件，如下所示：

在您的代码中，

triangleInfo

应该只是“类型”（在typescript中），因此您不应该像访问来自状态变量的值一样从中访问属性。我认为它的定义是这样的：

最后，在您的

getArea

方法中，我认为您希望在提交表单时调用它：

，并且您可能希望使用“当前”状态值来计算“状态”

区域

：

---

注：在您的用例中，您不必使用道具，而“triangleInfo”可以在您的“状态”中使用。

谢谢您的建议，现在我知道如何处理各种输入更改！但是我仍在学习，我不太明白你在第3个问题上的意思。我编辑了我的答案，#3是

typescript

特定的，如果你想在javascript中使用

typescript

，你应该对它进行更多的研究。我正在使用接口，接口三角信息{base:number；height:number；area:number；error:string；}即使我做了一些更改，我仍然会在输入标记上得到一个错误，即value={base}找不到name'base'。ts（2304）哪一行？虽然这值得单独讨论，但不喜欢在评论部分有类似聊天的对话的帖子。另外，试着消除它“typescript代码”，如果它有助于隔离问题

export default class triangleArea extends React.Component<triangleInfo> {
    constructor(props:triangleInfo) {
        super(props);

        //initializing variables to undefined
        this.handleChange = this.handleChange.bind(this);

  this.state = {
      base: 0,
      height: 0,
      area: undefined,
      error: ""
    };
  }

  //Handling change of input Base and HEIGHT

  handleChange = (event: React.ChangeEvent<HTMLInputElement>)=> 
  {
       this.setState({
       name : event.target.value
  });
  }//getArea function to calculate Area

  getArea = async (triangleInfo) => {
      triangleInfo.preventDefault();

      const base = triangleInfo.target.elements.base.value;
      const height = triangleInfo.target.elements.height.value;

      if(base > 0 && height > 0)
      {
          this.setState ({
             base: triangleInfo.target.elements.base.value,
             height : triangleInfo.target.elements.height.value,
             area: (base*height)/2
          })
      }
      else
      {
          this.setState ({
              base: undefined,
              height: undefined,
              area: undefined,
              error: "Please enter the values correctly."
          })
      }
  }

render() {
    return (
       //...
      <div>
        <form>
           <p>Calculate the base of a triangle!</p>
           <input type="text" id="base" placeholder = "base" value={this.state.base} onChange={this.handleChange}></input>
           <input type="text" id="height" placeholder = "height" value={this.state.height} onChange={this.handleChange}></input>
           <button type="submit">Get Area</button>
        </form>
     </div>
    //...
  );
}
};

/* Where the first param could be "base" or "height" */
handleChange = (field: "base" | "height", value) => {
  this.setState({
    [field]: value
  });
  ...

/* and call it in input "onChange" like so: */
 onChange={(e) => this.handleChange("base", e.target.value)}

 // ... do the same for "height" field

type triangleInfo = {
  base: number;
  height: number;
  area: number;
};

/* usage
const t: triangleInfo = { base: 5, height: 6, area: 15 };
*/

// remember that you set state "base" and "height" from your handleChange method.
const { base, height } = this.state;

if(base > 0 && height > 0) {
  this.setState ({
    // you probably only want to calculate area, so you can leave base and height as it is.
    area: (base*height)/2
  })
}
...