React-带子步骤的复选框的多步骤形式未设置为true

Question

我正在React中创建一个多步骤。父组件具有3个子组件，这是表格的步骤。在第一步中，我有4个文本输入，需要一个复选框才能允许WPP通信，问题是我在单击时无法将复选框状态设置为true。 父组件就是这样：

import React from 'react';
import FormStep0 from './formStepZero';
import FormStep1 from './formStepOne';



class VendeForm extends React.Component {
    constructor(props) {
      super(props)
      this.state = {
        currentStep: 0,
        nombre: '',
        apellido: '',
        celular: '',
        email:  '',
        username: '',
        password: '',
        checkbox: false, 
      }
    }
  
    handleChange = event => {
      const {name, value} = event.target
      this.setState({
        [name]: value
      })    
    }
     
    handleSubmit = event => {
      event.preventDefault()
      const { email, username, password, nombre, apellido, celular,checkbox } = this.state
      alert(`Your registration detail: \n 
             Email: ${email} \n 
             Username: ${username} \n
             Password: ${password} \n
             Nombre: ${nombre} \n 
             Apellido: ${apellido} \n
             Celular: ${celular} \n
             Checkbox: ${checkbox} \n`)
    }
    
    _next = () => {
      let currentStep = this.state.currentStep
      currentStep = currentStep >= 2? 3: currentStep + 1
      this.setState({
        currentStep: currentStep
      })
    }
      
    _prev = () => {
      let currentStep = this.state.currentStep
      currentStep = currentStep <= 0? 0: currentStep - 1
      this.setState({
        currentStep: currentStep
      })
    }
  
  /*
  * the functions for our button
  */
  previousButton() {
    let currentStep = this.state.currentStep;
    if(currentStep > 1){
      return (
        <div className='vertical-center'>
        <button 
          className="btn btn-secondary float-right mx-2 my-2" 
          type="button" onClick={this._prev}>
        Previous
        </button>
        </div>
      )
    }
    return null;
  }
  
  nextButton(){
    let currentStep = this.state.currentStep;
    if(currentStep <3 && currentStep >=1){
      return (
        <div className='vertical-center'>
        <button 
          className="btn primary-bg-style float-left mx-2 my-2" 
          type="button" onClick={this._next}>
        Siguiente 
        </button>        
        </div> 
      )
    }
    return null;
  }
  empecemosButton(){
    let currentStep = this.state.currentStep;
    if(currentStep === 0){
      return (
        <div className='vertical-center'>
        <button 
          className="btn primary-bg-style" 
          type="button" onClick={this._next}>
        Vamos! 
        </button>
        </div>        
      )
    }
    return null;
  }
    render() {    
      return (
        <React.Fragment>     
        {/*render the form steps and pass required props in*/}
          <Step0
            currentStep={this.state.currentStep}
            handleChange={this.handleChange}
          />

        <div className="container d-flex flex-column py-2">
          
          <form onSubmit={this.handleSubmit}>

            <Step1 
              currentStep={this.state.currentStep} 
              handleChange={this.handleChange}

              nombre={this.state.nombre}
              apellido={this.state.apellido}
              celular={this.state.celular}
              email={this.state.email}
              checkbox={this.state.checkbox}
            />
            <Step2 
              currentStep={this.state.currentStep} 
              handleChange={this.handleChange}
              username={this.state.username}
            />
            <Step3 
              currentStep={this.state.currentStep} 
              handleChange={this.handleChange}
              password={this.state.password}
            />
          </form>
          <div className='prev-next-btn'>
              
            {this.previousButton()}
            
            
            {this.nextButton()}
            
          </div>
          {this.empecemosButton()}
        </div>
        </React.Fragment>
      );
    }
  }

  function Step0(props){
    if (props.currentStep !== 0) {
      return null
    }
    return(

<div className="vertical-center"> {/*<!--^--- Added class  --> */}
        ...
</div>


    )
  }
  
  function Step1(props) {
    if (props.currentStep !== 1) {
      return null
    } 
    return(
      <div className="form-group">

        <div className="vertical-center">
          <div className="container">
            <h1 className='pb-4 px-2'>Datos de Contacto</h1>
            <CircleSteps currentStep={props.currentStep} />
            <FormStep1  nombre={props.nombre}
                        apellido={props.apellido}  
                        celular={props.celular}
                        email={props.email}

                        checkbox={props.checkbox}

                        handleChange = {props.handleChange}
            />

          </div>
        </div>

      </div>
    );
  }
  
export default VendeForm;

以及复选框在哪里的子组件：

import React from 'react';
import {Col, Row,Container} from 'reactstrap'


function FormStep1(props) {

  return(
        <div>

            <Container className="vende-form-container pt-3">
                <Row className='align-items-center justify-content-center'>
                    <Col md={4} sm={12}>
                        <div className="form-group">
                            <label htmlFor="nombre">Nombre</label>
                            <input
                            className="form-control"
                            id="nombre"
                            name="nombre"
                            type="text"
                            placeholder="Escribe tu nombre"
                            value={props.nombre}
                            onChange={props.handleChange}
                            />
                        </div>
                    </Col>
                    <Col md={4} sm={12} >
                        <div className="form-group">
                            <label htmlFor="apellido">Apellido</label>
                            <input
                            className="form-control"
                            id="apellido"
                            name="apellido"
                            type="text"
                            placeholder="Escribe tu apellido"
                            value={props.apellido}
                            onChange={props.handleChange}
                            />
                        </div>
                    </Col>
                </Row>
                <Row className='align-items-center justify-content-center'>
                    <Col md={4} sm={12}>
                        <div className="form-group">
                            <label htmlFor="celular">Celular</label>
                            <input
                            className="form-control"
                            id="celular"
                            name="celular"
                            type="text"
                            placeholder="Escribe tu celular"
                            value={props.celular}
                            onChange={props.handleChange}
                            />
                        </div>
                    </Col>
                    <Col md={4} sm={12}>
                        <div className="form-group">
                            <label htmlFor="email">Email</label>
                            <input
                            className="form-control"
                            id="email"
                            name="email"
                            type="text"
                            placeholder="Escribe tu email"
                            value={props.email}
                            onChange={props.handleChange}
                            />
                        </div>
                    </Col>


                </Row>

            
                <Row className='align-items-center justify-content-start'>
                    
                    {/* checkbox allowing whatsapp communication */}
                    <Col sm={{size:6, offset:2}} md={{size:3, offset:2}}>
                    <div className="form-check">
                        <input
                            className="form-check-input" 
                            id="wppCheckbox"
                            name="controlled" 
                            type="checkbox" 
                            checked={props.checkbox} 
                            onChange={props.handleChange} 
                            />
                        <label className="form-check-label" htmlFor="wppCheckbox">
                            Aceptas comunicacion via Whatsapp
                        </label>
                    </div>
                    </Col>
                </Row>   
            </Container>

        </div>
        );        

}

export default FormStep1;

我当前拥有的行为是我单击复选框，但仍位于空白中，其他表单的其他字段也很好地运行良好，并传递给状态适当地

Answer 1

如果我正确理解，您的复选框将由通用handlechange（）函数处理：

    handleChange = event => {
      const {name, value} = event.target
      this.setState({
        [name]: value
      })    
    }

您可以尝试调试的最简单的事情就是在单击复选框时记录您在该功能中获得的内容。在这种情况下，很可能您总是获得相同的值（“ On”），因此该州没有任何变化。
我建议使用专用处理程序，或者将其修改为sth

    handleChange = event => {
      const {name, type, value} = event.target
      if (type === 'checkbox') {
        return this.setState({
          [name]: event.target.checked
        }) 
      }
      this.setState({
        [name]: value
      })    
    }