Reactjs 如何在react中使用复选框表单？

有两个组件

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>
        );
      }
    }

导出默认类ApplyFormContainer扩展组件{
建造师（道具）{
超级（道具）；
此.state={
表格：{
性别：''，
勾选：假，
},
};
}
handleCheckBox=e=>{
常数{
目标：{checked}，
}=e；
这是我的国家({
表格：{
…这个.state.form，
选中的，
},
});
};
handleGender=id=>{
这是我的国家({
表格：{
…这个.state.form，
性别:id,，
},
});
};
render（）{
const{handleGender，handleCheckBox}=this；
const{form}=this.state；
返回(
);
}
}

演示者：

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>
  );
};

从“React”导入React；
从“样式化组件”导入样式化；
const Form=styled.Form`
显示：网格；
`;
const Flex=styled.div`
显示器：flex；
对齐项目：居中；
证明内容：中心；
标签{
保证金：2rem；
/*输入[type='checkbox']{
显示：无；
}
} */
}
`;
const ApplyFormPresenter=（{form，handleGender，handleCheckBox}）=>{
返回(
试验
{' '}
试验
{' '}
试验
);
};

有几种方法可以做到这一点。我的建议是：您希望将值保存在对象中并映射到其键上

以下是一个使用以下方法的解决方案：

函数应用程序（）{
常量[状态，设置状态]=React.useState({
性别：错，
爱：虚假
});
常量handleToggle=（{target}）=>
setState（s=>（{…s[target.name]：！s[target.name]}）；
返回(
{Object.keys（state.map）（key=>(
))}
);
}

您可以对复选框事件使用此handleInputChange方法

  handleInputChange = (event) => {
    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;

    this.setState({
      [name]: value
    });
  }

定义你的状态变量，如下所示

this.state = {
  love: false,
  friend: false,
  money: false
};

let value = this.state.friend

并设置复选框的onChange事件，其id和name参数与您的状态相同

<input
  type="checkbox"
  id="friend"
  name="friend"
  onChange={this.handleInputChange}
  checked={this.state.friend}
/>

let value = this.state.friend