时间戳

首页 > 解决方案 > 在 Reactjs 表中将 Row.values 和用户输入值相乘

javascript - 在 Reactjs 表中将 Row.values 和用户输入值相乘

问题描述

我有一个从后端数据库获取数据（工资/小时和出席人数）的表。我正在尝试在同一个表中创建一个 UI，允许用户输入值（加班小时数），然后自动用于计算 totalWages = (wages/hr.numberofPresentAttendances.overtime)。

 filtered = this.state.data.map( (row, i) => {
      if(row.department.toLowerCase().indexOf(this.state.departmentFilter) > -1){
        return (
          <tr key={"workerData"+i}>
            <td>{i+1}</td>

            <td>{row.name}</td>
            <td>{row.numberofPresentAttendances}</td>
           <td>{row.wages}</td>
           <td>{row.totalWages}</td>
            <td>{row.overtime}</td>
            <td>overtime</td>
                <td>
                  <input number="text" name="overtime" id="time" className="form-control" 
                  placeholder="Enter Nos of overtime hrs..." 
                  value={this.state.overtime} 
                  onChange={this.handleOvertimeChange} required />
                </td>
            <td>{row.Tallowance}</td>

            <td>


            </td>
          </tr>

我知道这不是正确的方法，但我想做这样的事情：

constructor(props){
    super(props);

    this.state = {

      totalWages:0,

    };


    this.onOvertimeChange = this.onOvertimeChange.bind(this);
  }



onOvertimeChange(event){
    this.setState({ totalWages: event.target.value*row.wages*row.numberofPresentAttendances });
  }

如果这样做，我会收到几个错误，其中一个错误将是“未定义行”我如何让它工作以便它在每一行上工作？

标签： javascriptreactjs

解决方案

该函数不知道行是什么，将其作为参数传递并在onOvertimeChange函数上创建一个闭包

...
                  onChange={this.handleOvertimeChange(row)} required />
...

并更新 onOvertimeChange 如下

const onOvertimeChange = (row) => (event) => {
    this.setState({ totalWages: event.target.value*row.wages*row.numberofPresentAttendances });
  }

推荐阅读