React Material ToggleButton组选中计数问题求助

1. 重构状态管理 #

把原来分散的Q1、Q2状态合并成一个对象，集中管理所有问题的答案，方便后续统计：

const [answers, setAnswers] = React.useState({
  Q1: '', // 初始值为空，代表未作答
  Q2: ''
});

2. 统一处理选择事件 #

不用为每个问题单独写处理函数，写一个通用函数来更新对应问题的答案：

const handleAnswerChange = (questionId, event, newValue) => {
  // 确保选中的值有效（非空且不是null）
  if (newValue !== null && newValue.length) {
    setAnswers(prev => ({
      ...prev,
      [questionId]: newValue
    }));
  }
};

3. 统计Yes/No次数 #

用useMemo计算统计结果，避免每次渲染重复计算：

const { yesCount, noCount } = React.useMemo(() => {
  let yes = 0;
  let no = 0;
  // 遍历所有答案，统计次数
  Object.values(answers).forEach(ans => {
    if (ans === 'yes') yes++;
    else if (ans === 'no') no++;
  });
  return { yesCount: yes, noCount: no };
}, [answers]); // 仅当answers变化时重新计算

4. 修改ToggleButtonGroup组件 #

把每个问题的组件绑定到统一的状态和处理函数：

return (
  <div>
    <label>Question 1</label>
    <ToggleButtonGroup 
      value={answers.Q1} 
      exclusive 
      onChange={(e, val) => handleAnswerChange('Q1', e, val)} 
      aria-label="question 1"
    >
      <ToggleButton value="yes">Yes</ToggleButton>
      <ToggleButton value="no">No</ToggleButton>
    </ToggleButtonGroup>

    <label>Question 2</label>
    <ToggleButtonGroup 
      value={answers.Q2} 
      exclusive 
      onChange={(e, val) => handleAnswerChange('Q2', e, val)} 
      aria-label="question 2"
    >
      <ToggleButton value="yes">Yes</ToggleButton>
      <ToggleButton value="no">No</ToggleButton>
    </ToggleButtonGroup>

    {/* 展示统计结果 */}
    <div>
      <p>Yes 选中次数: {yesCount}</p>
      <p>No 选中次数: {noCount}</p>
    </div>
  </div>
);

完整代码 #

import React from 'react';
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
import ToggleButton from '@mui/material/ToggleButton';

function App() {
  const [answers, setAnswers] = React.useState({
    Q1: '',
    Q2: ''
  });

  const handleAnswerChange = (questionId, event, newValue) => {
    if (newValue !== null && newValue.length) {
      setAnswers(prev => ({
        ...prev,
        [questionId]: newValue
      }));
    }
  };

  const { yesCount, noCount } = React.useMemo(() => {
    let yes = 0;
    let no = 0;
    Object.values(answers).forEach(ans => {
      if (ans === 'yes') yes++;
      else if (ans === 'no') no++;
    });
    return { yesCount: yes, noCount: no };
  }, [answers]);

  return (
    <div style={{ padding: '20px' }}>
      <div style={{ marginBottom: '20px' }}>
        <label style={{ marginRight: '10px' }}>Question 1</label>
        <ToggleButtonGroup 
          value={answers.Q1} 
          exclusive 
          onChange={(e, val) => handleAnswerChange('Q1', e, val)} 
          aria-label="question 1"
        >
          <ToggleButton value="yes">Yes</ToggleButton>
          <ToggleButton value="no">No</ToggleButton>
        </ToggleButtonGroup>
      </div>

      <div style={{ marginBottom: '20px' }}>
        <label style={{ marginRight: '10px' }}>Question 2</label>
        <ToggleButtonGroup 
          value={answers.Q2} 
          exclusive 
          onChange={(e, val) => handleAnswerChange('Q2', e, val)} 
          aria-label="question 2"
        >
          <ToggleButton value="yes">Yes</ToggleButton>
          <ToggleButton value="no">No</ToggleButton>
        </ToggleButtonGroup>
      </div>

      <div>
        <p><strong>Yes 选中次数:</strong> {yesCount}</p>
        <p><strong>No 选中次数:</strong> {noCount}</p>
      </div>
    </div>
  );
}

export default App;

这个方案的优势：

• 状态集中管理，后续添加更多问题时，只需在answers初始状态里添加对应键值，复制ToggleButtonGroup组件修改questionId即可
• 统计逻辑通用，不管新增多少问题都能自动计算次数
• 减少重复代码，维护成本更低

内容的提问来源于stack exchange，提问作者cvb