Html 反应引导复选框不切换'；选中'；支持选择

我对React Bootstrap相当陌生，我在创建表单时遇到了一个恼人的问题

在“我的状态”更新后选择时，它们不会保持选中状态。如果我再检查一遍，他们会的

我创建了一个切换函数，它在状态中附加来自选中复选框的输入，并将选中的属性设置为true<代码>选中={true}

我写了两种方式，都不起作用

handleToggle(e) {
    e.preventDefault()
    const selectedBox = "cb" + e.target.value
    this.setState({ goals: this.state.goals + e.target.value, [selectedBox]: e.target.checked })
  }

handleToggle(e) {
    e.preventDefault()
    const selectedBox = "cb" + e.target.value
    this.setState({ goals: this.state.goals + e.target.value, [selectedBox]: true })
  }

令人沮丧的是，状态中的正确值正在更新。我插入了一个调试器，可以看到当前状态，其中包含所选复选框的真值，以及附加到当前目标键下的任何内容的用户输入

任何方向都欢迎。这需要一段时间来调试。谢谢

全组分-

import React from 'react';
import { connect } from 'react-redux';
import { Button, form, FormGroup, Checkbox, Radio, option, ControlLabel, FormControl, ProgressBar, Pagination, Form } from 'react-bootstrap';
import DatePicker from "react-bootstrap-date-picker";
import { handleChange } from '../helpers';

class Portfolio extends React.Component {
  constructor(props) {
    super(props)
    var value = new Date().toISOString();
    this.state = {
        date: value,
        experience: 1,
        progress: 0,
        active: false,
        goals: "",
        cb1: false,
        cb2: false,
        cb3: false,
        cb4: false,
        cb5: false
    }
    this.handleSelect = this.handleSelect.bind(this)
    this.handleToggle = this.handleToggle.bind(this)
  }

  handleSelect(eventKey) {
    if (this.state.active === false) {
      this.setState({ experience: eventKey, progress: this.state.progress += 20, active: true })
    } else {
      this.setState({ experience: eventKey })
    }
  }

  handleToggle(e) {
    e.preventDefault()
    const selectedBox = "cb" + e.target.value
    this.setState({ goals: this.state.goals + e.target.value, [selectedBox]: e.target.checked })
  }

  render() {
    const stats = this.props.user.stats
    if (!stats || stats.length === 0) {
      return(
        <div className="portfolio-form-main">
          <div className="portfolio-form-container-title-div">
            <h1 className="portfolio-title">Profile Information</h1>
          </div>
          <div className="portfolio-form-container">
            <form className="portfolio-form">
              <ProgressBar active now={this.state.progress} />
              <FormGroup>
                <ControlLabel>Choose Your Goals.</ControlLabel>
                <Checkbox checked={this.state.cb1} onChange={this.handleToggle} value="1" >
                  Lose Some Weight
                </Checkbox>
                {' '}
                <Checkbox checked={this.state.cb2} onChange={this.handleToggle} value="2">
                  Build Strength and Muscle
                </Checkbox>
                {' '}
                <Checkbox checked={this.state.cb3} onChange={this.handleToggle} value="3">
                  General Health and Wellness
                </Checkbox>
                {' '}
                <Checkbox checked={this.state.cb4} onChange={this.handleToggle} value="4">
                  Compete in an Event
                </Checkbox>
                {' '}
                <Checkbox checked={this.state.cb5} onChange={this.handleToggle} value="5">
                  Rehab an Injury
                </Checkbox>
              </FormGroup>
              <FormGroup>
                <ControlLabel>Rate Your Exercise Experience Level.</ControlLabel>
                <Pagination
                  bsSize="medium"
                  items={10}
                  activePage={this.state.experience}
                  onSelect={this.handleSelect}
                  />
              </FormGroup>
              <FormGroup>
                <ControlLabel>When is Your Birthday?</ControlLabel>
                  {' '}
                <DatePicker value={this.state.value}/>
              </FormGroup>
              <ControlLabel>How Tall Are You?</ControlLabel>
              {' '}
              <Form inline>
                <FormGroup>
                  <FormControl type="number"/>
                  {' '}
                    <FormControl componentClass="select" placeholder="select">
                      <option value="select">Unit</option>
                      <option value="other">in</option>
                      <option value="other">cm</option>
                    </FormControl>
                </FormGroup>
              </Form>
              <ControlLabel>How Much Do You Weigh?</ControlLabel>
              {' '}
              <Form inline>
                <FormGroup>
                  <FormControl type="number"/>
                  {' '}
                    <FormControl componentClass="select" placeholder="select">
                      <option value="select">Unit</option>
                      <option value="other">Lbs</option>
                      <option value="other">Kgs</option>
                    </FormControl>
                </FormGroup>
              </Form>
              <FormGroup >
                <ControlLabel>Tell Us About Yourself.</ControlLabel>
                  {' '}
                <FormControl componentClass="textarea" placeholder="textarea" />
              </FormGroup>
              <Button bsStyle="primary">
                Submit
              </Button>
            </form>
          </div>
        </div>
      )
    }

    return(
      <div>
        <ul>
          <li>{stats.birthdate}</li>
          <li>{stats.weight} {stats.weight_unit}</li>
          <li>{stats.height} {stats.height_unit}</li>
          <li>{stats.experience}</li>
          <li>{stats.about_me}</li>
        </ul>
      </div>
    )
  }


}

export default Portfolio

从“React”导入React；
从'react redux'导入{connect}；
从“react bootstrap”导入{按钮、表单、表单组、复选框、单选、选项、ControlLabel、表单控件、ProgressBar、分页、表单}；
从“react引导日期选择器”导入日期选择器；
从“../helpers”导入{handleChange}；
类公文包扩展了React.Component{
建造师（道具）{
超级（道具）
var值=新日期（）.toISOString（）；
此.state={
日期：价值，
经验:1,，
进展：0，
活动：错误，
目标：“，
cb1：错，
cb2：错，
cb3：错，
cb4：错，
cb5：错误
}
this.handleSelect=this.handleSelect.bind（this）
this.handleToggle=this.handleToggle.bind（this）
}
handleSelect（事件键）{
if（this.state.active==false）{
this.setState（{experience:eventKey，progress:this.state.progress+=20，active:true}）
}否则{
this.setState（{experience:eventKey}）
}
}
手语（e）{
e、 预防默认值（）
const selectedBox=“cb”+e.target.value
this.setState（{goals:this.state.goals+e.target.value，[selectedBox]：e.target.checked}）
}
render（）{
const stats=this.props.user.stats
如果（！stats | | stats.length==0）{
返回(
配置文件信息
选择你的目标。
减肥
{' '}
增强力量和肌肉
{' '}
一般健康和身心健康
{' '}
比赛
{' '}
康复
评价你的锻炼经验水平。
你的生日是什么时候？
{' '}
你身高多少？
{' '}
{' '}
单位
在里面
厘米
你体重多少？
{' '}
{' '}
单位
磅
千克
跟我们说说你自己吧。
{' '}
提交
)
}
返回(

{stats.birthdate}
{stats.weight}{stats.weight_unit}
{stats.height}{stats.height_unit}
{stats.experience}
{stats.about_me}

)
}
}
导出默认投资组合

适用于寻找解决方案的任何人--

这非常适用于选择和取消选择复选框、设置状态、添加和删除选中值

handleToggle(e) {
    e.preventDefault()
    const selectedBox = "cb" + e.target.value
    if (this.state.goals.includes(e.target.value)) {
      const goal = this.state.goals.replace(e.target.value, '')
      this.setState({ goals: goal, [selectedBox]: e.target.checked })
    } else {
      this.setState({ goals: this.state.goals + e.target.value, [selectedBox]: e.target.checked })
    }
    this.props.requestUser(this.props.match.params.userId);
  }

---

任何人都在寻找解决方案--

这非常适用于选择和取消选择复选框、设置状态、添加和删除选中值

handleToggle(e) {
    e.preventDefault()
    const selectedBox = "cb" + e.target.value
    if (this.state.goals.includes(e.target.value)) {
      const goal = this.state.goals.replace(e.target.value, '')
      this.setState({ goals: goal, [selectedBox]: e.target.checked })
    } else {
      this.setState({ goals: this.state.goals + e.target.value, [selectedBox]: e.target.checked })
    }
    this.props.requestUser(this.props.match.params.userId);
  }

---

从答案中的

handleToggle

函数中删除

e.preventDefault（）

，应该可以消除强制页面刷新的需要

单击复选框时，React会将上一个值与下一个值进行比较，以确定是否发生了更改。如果有更改，则将更改事件排入队列

React似乎在调用

Handletogle

之前向DOM查询选中的值，因此复选框值为True。然后执行

preventDefault（）

，因此DOM中的复选框值现在为False，但React已将该值设置为True

---

因此，当使用带有复选框（可能还有单选按钮）的

preventDefault（）

时，DOM和React之间会出现不一致。

从答案中的

handleToggle

函数中删除

e.preventDefault（）

应该可以消除强制页面刷新的需要

单击复选框时，React会将上一个值与下一个值进行比较，以确定是否发生了更改。如果有更改，则将更改事件排入队列

React似乎在调用

Handletogle

之前向DOM查询选中的值，因此复选框值为True。然后执行

preventDefault（）

，因此DOM中的复选框值现在为False，但React已将该值设置为True

---

因此，当使用带有复选框（可能还有单选按钮）的

preventDefault（）

时，DOM和React之间会出现不一致的情况。

我是通过在handl上刷新页面来实现的