复选框-从状态获取起始值 [英] Checkboxes - Getting starting value from state

问题描述

我具有以下形式，并且起作用的部分是它将每个选项的状态设置为"true".的假"当我选中并取消选中预期的框时.

I have the following form, and the part that works is it sets the state for each option to "true" of "false" as I check and uncheck the boxes as expected.

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

My problem is that when I first run the app, if I have some states set to true, I want those checkboxes to start off rendered as checked... however they don't. Even those the state is true, they all render unchecked. I believe I'm just not getting the value to the right spot to make it check. But I'm not sure what else to try. Any help would be appreciated.

父项:

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;

具有窗体和复选框的我的子组件(前两个应呈现为选中状态，因为它们从开始就为"true"):

My Child Component with the form and checkboxes(The first two should render as checked since they are "true" to start off):

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;

推荐答案

要一次从状态传递所有复选框的值，可以将它们置于子状态下，例如:

To pass all checkboxes value from state at once, you can grab them in a sub level of state like:

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

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

and then pass only checkboxes states to Culture props

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

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

And rewrite your handleCheck function like this:

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

这篇关于复选框-从状态获取起始值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！