如何在反应中使用复选框形式？

Question

有两个组成部分container和presenter。
下面的代码显示单个复选框状态变为 true，并且另一个复选框也正在更新。那么，如何处理具有状态的多个复选框？

容器：

 export default class ApplyFormContainer extends Component {
      constructor(props) {
        super(props);
        this.state = {
          form: {
            gender: '',
            checked: false,
          },
        };
      }
      handleCheckBox = e => {
        const {
          target: { checked },
        } = e;
        this.setState({
          form: {
            ...this.state.form,
            checked,
          },
        });
      };
      handleGender = id => {
        this.setState({
          form: {
            ...this.state.form,
            gender: id,
          },
        });
      };

      render() {
        const { handleGender, handleCheckBox } = this;
        const { form } = this.state;
        return (
          <Container>
            <ApplyFormPresenter
              form={form}
              handleGender={handleGender}
              handleCheckBox={handleCheckBox}
            />
          </Container>
        );
      }
    }

主持人：

import React from 'react';
import styled from 'styled-components';

const Form = styled.form`
  display: grid;
`;
const Flex = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  label {
    margin: 2rem;
    /* input[type='checkbox'] {
      display: none;
    }
  } */
  }
`;

const ApplyFormPresenter = ({ form, handleGender, handleCheckBox }) => {
  return (
    <div>
      <Form>
        <Flex>
          <label>
            <span>TEST</span>
            <input
              type="checkbox"
              value="love"
              onChange={handleCheckBox}
              checked={form.checked}
            />
          </label>{' '}
          <label>
            <span>TEST</span>
            <input
              type="checkbox"
              value="friend"
              onChange={handleCheckBox}
              checked={form.checked}
            />
          </label>{' '}
          <label>
            <span>TEST</span>
            <input
              type="checkbox"
              value="money"
              onChange={handleCheckBox}
              checked={form.checked}
            />
          </label>
        </Flex>
      </Form>
    </div>
  );
};

Answer 1

做这件事有很多种方法。我的建议：您希望将值保存在对象中并映射其键。

这是使用Hooks 的解决方案：

function App() {
  const [state, setState] = React.useState({
    gender: false,
    love: false
  });

  const handleToggle = ({ target }) =>
    setState(s => ({ ...s, [target.name]: !s[target.name] }));

  return (
    <div>
      {Object.keys(state).map(key => (
        <input
          type="checkbox"
          onChange={handleToggle}
          key={key}
          name={key}
          checked={state[key]}
        />
      ))}
    </div>
  );
}