如何获取动态变化的输入标签的值总和（输入数量根据一个月中的天数动态变化）？ [关闭]答案

【问题标题】：How to get the sum of values for inputs Tags that change dynamically (number of inputs change dynamically according to number of days in a month)? [closed]如何获取动态变化的输入标签的值总和（输入数量根据一个月中的天数动态变化）？ [关闭]
【发布时间】：2021-12-16 12:40:23
【问题描述】：

我正在尝试计算输入值的总和（输入的数量动态变化）

这是返回输入数量的函数：

const renderINP = () => {
        let td = [];
        for (let i = 1; i <= 3; i++) {
          td.push(<td key={i}><input className="example" type="text" defaultValue="0" id={i} /></td>);
        }
        return td;
      };

这是我的组件返回

return (
        <div>
            <table>
                <tbody>
                    <tr>
                        {renderINP()}
                        <td>total<input id="total" type="text" defaultValue={total} /></td>
                    </tr>
                </tbody>
            </table>
        </div>
    );
}

这个函数应该返回用户输入的值的总和：

  const [total,setTotal] = useState(0);

      const getSum = () => {
          let totalOfInps=0;
        for (let i = 1; i <= 3; i++){
            let a=parseFloat(document.getElementById(i).value);
            totalOfInps+=a;
        }
        setTotal(totalOfInps);
    }

我正在尝试返回输入中所有输入值的总和，该输入具有 id="total" 但它什么也不返回，当我使用 console.log(totalOfInps) 它在控制台中什么也不显示，如何我可以得到所有输入值的总和吗？

【问题讨论】：

您能解释一下这个问题，或者是什么没有按您的预期工作吗？
@DeanJames 它应该返回输入中具有 id="total" 的所有输入值的总和，但它什么也不返回，而且当我写 console.log(totalOfInps) 时它什么也不显示控制台
你应该 1) 为每个输入使用 useState 钩子，2) 为每个输入注册一个 onChange 事件处理程序，3) 通过调用钩子的 setter 在事件处理程序中设置输入的当前值, 4) 计算总数
@AliBaykal 我如何为每个输入使用 useState 挂钩？输入的数量根据一个月的天数动态变化，在这个例子中，我尝试了 3 个输入，只是为了让我在输入值时更容易
@YassineElAissati 嗯，是的，这有点复杂。您可能应该使用一个带有数组的 useState 挂钩来将每个输入的值存储在其中。

标签： javascript reactjs react-hooks jsx

【解决方案1】：


import {useState} from 'react';

const sumAll = numList => numList.reduce((acc, num = 0) => acc + num, 0);

const handleInputChange = (inputIndex, setValues) => event => {
  const value = parseFloat(event.target.value);
  if(!isNaN(value)){
    setValues(previous => {
      const copy = previous.slice();
      copy[inputIndex] = value;
      return copy;
    });
  }
}


function App(){
  const [values, setValues] = useState([]);
  const total = sumAll(values);

  return (
        <div>
            <table>
                <tbody>
                    <tr>
                        {
                          [1,2,3].map((id, index) => {
                            const onChange = handleInputChange(index, setValues);
                            return (
                              <td key={index}>
                                <input 
                                  className="example"
                                  onChange={onChange}
                                  type="text"
                                  defaultValue="0"
                                  id={id} 
                                />
                              </td>
                            );
                          })
                        }
                        <td>total<input id="total" type="text" defaultValue="0"  value={total}/></td>
                    </tr>
                </tbody>
            </table>
        </div>
    );
};

export default App;

【讨论】：

我创建了一个返回当月天数的函数，我如何使这些组件根据我的函数返回的值返回输入数（28 或 29 或 30 或 31） ? function daysInCurrentMonth() { var now = new Date(); return new Date(now.getFullYear(), now.getMonth()+1, 0).getDate(); }
代替 [1,2,3] 你必须使用像 [1,2...,31] 这样的数组。您可以编写一个函数来获取天数并返回该数组。