Question

我正在使用TypeScript和React。我有一个表格，您可以在其中添加数字，并计算总数的小时数。我有8个不同的输入字段可以更改。我继续并添加id =“”以将Id添加到此字段。是否有不同的方法来计算总和？

  <div className="day___tonight">
        <Field
          name={quanity1}
          component={component1}
          id="qty"
          type="number"
          validate={valuesMax}
        />
      </div>

我无法使用正确的ES6 / TypeScript语法来解决此问题。这就是我想要做的。

function findTotal(){
    var arr = document.getElementsByName('qty');
    var tot=0;
    for(var i=0;i<arr.length;i++){
        if(parseInt(arr[i].value))
            tot += parseInt(arr[i].value);
    }
    document.getElementById('total').value = tot;
}

问题是如何在TypeScript中计算输入标签。

Answer 1

像你建议的那样读取DOM是React，Angular，Vue等中的一个重要的反模式。任何抽象DOM的框架基本上都不希望你搞砸它。那么可能与vanilla JS或jQuery一起使用的东西在这里不起作用。

我不熟悉您正在使用的<Field>组件。但香草版本看起来像这样：

interface Props {}

interface State {
   value1: number;
   value2: number;
   sum: number;
}

export class Sums extends React.Component<Props, State> {
   constructor(props: Props) {
       super(props); 
       this.state = {value1: 0, value2: 0, sum: 0};
   }

   render() {
       return (
           <div>
               <input type="number" value={this.state.value1} onChange={e => this._handleValue1(e);} />
               <input type="number" value={this.state.value2} onChange={e => this._handleValue2(e);} />
               <span>Total: {this.state.sum}</span>
           </div>
       );
   }

   private _handleValue1(e: React.FormEvent<HTMLInputElement>) {
      const val = Number.parseInt(e.currentTarget.value);
      this.setState({value1: val, sum: val + this.state.value2});
   }

   private _handleValue2(e: React.FormEvent<HTMLInputElement>) {
      const val = Number.parseInt(e.currentTarget.value);
      this.setState({value2: val, sum: val + this.state.value1});
   }
}

这仅适用于两个输入，但您可以通过数组快速将其概括为n，甚至是可变数量。

在TypeScript中 - 我试图找到带有React的输入标签的总和？

1 个答案: