在React中计算复选框值的总和,可以通过以下步骤实现:
下面是一个示例代码:
import React, { useState } from 'react';
function CheckboxComponent(props) {
const { value, onChange } = props;
return (
<label>
<input type="checkbox" value={value} onChange={onChange} />
{value}
</label>
);
}
function ParentComponent() {
const [checkboxValues, setCheckboxValues] = useState([]);
const [total, setTotal] = useState(0);
const handleCheckboxChange = (event) => {
const value = parseInt(event.target.value);
const isChecked = event.target.checked;
if (isChecked) {
setCheckboxValues([...checkboxValues, value]);
} else {
setCheckboxValues(checkboxValues.filter((val) => val !== value));
}
};
useEffect(() => {
const sum = checkboxValues.reduce((acc, curr) => acc + curr, 0);
setTotal(sum);
}, [checkboxValues]);
return (
<div>
<CheckboxComponent value={1} onChange={handleCheckboxChange} />
<CheckboxComponent value={2} onChange={handleCheckboxChange} />
<CheckboxComponent value={3} onChange={handleCheckboxChange} />
<CheckboxComponent value={4} onChange={handleCheckboxChange} />
<CheckboxComponent value={5} onChange={handleCheckboxChange} />
<p>Total: {total}</p>
</div>
);
}
export default ParentComponent;
在上述代码中,父组件ParentComponent
管理复选框的状态和计算总和。子组件CheckboxComponent
用于渲染复选框,并将复选框的值和改变事件通过props传递给父组件。父组件通过useState来管理复选框的值和总和,并在复选框改变时更新状态和重新计算总和。最后,父组件将总和显示在页面上。
这是一个简单的示例,你可以根据实际需求进行修改和扩展。
领取专属 10元无门槛券
手把手带您无忧上云