Question

import React, { Component } from "react";

   interface triangleInfo {
              base: number;
              height: number;
              area: number;
              error: string;
            }

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

                //initializing variables to undefined

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

              //Handling change of input Base and HEIGHT

              handleChange = (input: "base" | "height", value) => {
                this.setState({
                  [input]: value
                });
              };

              //getArea function to calculate Area
              getArea = triangleInfo => {
                triangleInfo.preventDefault();
                const { base, height } = this.props;

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

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

我正在做一个小项目，目的是练习技能并增进对reactjs和打字稿的理解，但是遇到和出错，我陷入了困境。

我尝试了很多东西。但是，我对此不是很有经验。另外，主要错误在于输入值实际能够进行计算。}

我得到的错误是找不到名称'base'.ts（2304）第68行

Answer 1

似乎您没有在base方法中声明height和render()。您需要在const { base, height } = this.props;的开头重复该行render()。

Answer 2

您没有得到状态的值。...更改输入值以反映状态。

value={this.state.base}

还有onChange。

onChange={this.onChange}

将其绑定到构造函数中的函数。

this.onChange = this.onChange.bind(this);
this.onSubmit = this.onSubmit.bind(this);

根据您的更改，我不确定在那里会发生什么，但是此示例应该适合您。只要目标值改变，它就会获取目标的值并将其设置为状态。

onChange = (e) => {        
   this.setState({
     [e.target.name]: e.target.value,
    });
 };

由于您使用的是按钮进行提交。

onClick={e => this.onSubmit(e)}


onSubmit = (e) => {
        e.preventDefault(); 
        var data = {            
            base: this.state.base   
        }
}

要使此功能有效，您还必须给输入一个名称。...name ='base'。

某些变量有问题

2 个答案: