javascript - 复选框 - 从状态中获取起始值

Question

我有以下表格，起作用的部分是当我按预期检查和取消选中复选框时，它将每个选项的状态设置为“真”或“假”。

我的问题是，当我第一次运行应用程序时，如果我将某些状态设置为 true，我希望这些复选框开始呈现为选中状态......但它们没有。即使那些状态是真实的，它们都呈现未检查状态。我相信我只是没有将价值带到正确的位置以进行检查。但我不确定还有什么可以尝试的。任何帮助，将不胜感激。

父组件：

class Audit extends Component {
  constructor(props) {
    super(props);

    this.state = {

      formRewardsService: true,
      formRewardsRetirement: true,
      formRewardsPeerRecognition: false,
      formRewardsSpot: false
     
    };

    this.handleCheck = this.handleCheck.bind(this);

  }

  handleCheck(e) {
    this.setState(({ isChecked }) => (
      {
        isChecked: !isChecked
      }
    ));
    console.log(e.target.name + ': ' + e.target.checked);
  }



  render() {
        return (
          <ThemeProvider theme={theme}>
            <Container>
              <Div>
                <Tabs defaultActiveKey="general" id="audit=tabs">
                  <Tab eventKey="culture" title="Culture">
                    <Culture handleCheck={this.handleCheck} { />
                  </Tab>
                </Tabs>
              </Div>
            </Container>
          </ThemeProvider>
        );
    }
    
}

export default Audit;

带有表单和复选框的我的子组件（前两个应该呈现为选中状态，因为它们是“真”开始）：

import React, { Component } from 'react';
import {Container, Form, Row, Col} from 'react-bootstrap';
import styled, { ThemeProvider } from 'styled-components';
import theme from "../../../../Config/Theme";

const Div = styled.div`
    background-color: white;
    color: black;

    
`

class Culture extends Component {
     


    render() {
        return (
          <ThemeProvider theme={theme}>
            <Div>
              <Container >
                <Form className="p-3">
                   
                    <Form.Group name="formRewards1" as={Row} controlId="formRewards1" onChange={this.props.handleCheck}>
                      <Form.Label column sm={5}>
                        1.What types of employee recognition programs are utilized within the organization?  Check all that apply. 
                    </Form.Label>
                      <Col>
                        <Form.Check
                          type="checkbox"
                          label="Service Awards"
                          value={this.props.formRewardsService}
                          name="formRewardsService"
                          id="formRewards1-1"
                          checked={this.props.value}
                        />
                        <Form.Check
                          type="checkbox"
                          label="Retirement Awards"
                          value={this.props.formRewardsRetirement}
                          name="formRewardsRetirement"
                          id="formRewards1-2"
                          checked={this.props.value}
                        />
                        <Form.Check
                          type="checkbox"
                          label="Peer Recognition Awards"
                          value={this.props.formRewardsPeer}
                          name="formRewardsPeer"
                          id="formRewards1-3"
                          checked={this.props.value}
                        />
                        <Form.Check
                          type="checkbox"
                          label="Spot Awards"
                          value={this.props.formRewardsSpot}
                          name="formRewardsSpot"
                          id="formRewards1-4"
                          checked={this.props.value}
                        />
                        
                      </Col>
                    </Form.Group>
                  </div>
                </Form>
              </Container>
            </Div>
          </ThemeProvider>
        );
    }
}

export default Culture;

标签： javascriptreactjsforms

Answer 1

要一次从状态中传递所有复选框值，您可以在状态的子级别中获取它们，例如：

state = { checkboxes : {
  formRewardsService: false,
  formRewardsRetirement : true,
  ...
}}

然后只将复选框状态传递给文化道具

<Culture handleCheck={this.handleCheck} {...this.state.checkboxes } />

并像这样重写您的 handleCheck 函数：

handleCheck = (e) => {
    const name = e.target.name;
    const checked = e.target.checked
    this.setState(
      {
        ...this.state,
        checkboxes: {
          ...this.state.checkboxes,
          [name]: checked 
        }
      }
    ));
    console.log(e.target.name + ': ' + e.target.checked);
  }