index.js 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940
  1. import React from 'react';
  2. import './index.less';
  3. import CheckboxItem from '../CheckboxItem';
  4. function AnswerCheckbox(props) {
  5. const { selected = [], answer = [], show, list = [], onChange } = props;
  6. // const trueList = [];
  7. const falseList = [];
  8. const map = {};
  9. answer.forEach(row => {
  10. map[row] = true;
  11. });
  12. selected.forEach(row => {
  13. if (!map[row]) falseList.push(row);
  14. });
  15. return (
  16. <div className="answer-checkbox">
  17. {list.map((item) => {
  18. return (
  19. <div className={`item ${answer.indexOf(item.value) >= 0 ? 'true' : ''} ${falseList.indexOf(item.value) >= 0 ? 'false' : ''} ${show ? 'show' : ''}`} onClick={() => {
  20. const index = selected.indexOf(item.value);
  21. if (index >= 0) {
  22. selected.splice(index, 1);
  23. } else {
  24. selected.push(item.value);
  25. }
  26. if (onChange) onChange(selected);
  27. }}>
  28. <CheckboxItem checked={selected.indexOf(item.value) >= 0} />
  29. <div className="text">{item.label}</div>
  30. <div className="icon" />
  31. </div>
  32. );
  33. })}
  34. </div>
  35. );
  36. }
  37. AnswerCheckbox.propTypes = {};
  38. export default AnswerCheckbox;