React Bootstrap CheckBox가 '선택'토글을 선택 취소하지 않음

Question

React Bootstrap에 상당히 익숙하며 작성중인 양식의 확인란에 문제가 있습니다.

내 상태가 업데이트 된 후에도 선택 상태가 유지되지 않습니다. 내가 다시 확인하면 그럴거야.

나는 선택한 체크 박스의 입력을 state에 추가하고 체크 된 prop를 true로 설정하는 토글 기능을 만들었습니다. checked={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 

Answer 1

-

이 선택하고 체크 박스를 해제하고 상태를 설정 추가 및 확인 값을 제거하기 위해 완벽하게 작동합니다. 강제 페이지 새로 고침에 대한 필요성을 제거한다 당신의 대답에 handleToggle 함수에서 e.preventDefault() 제거

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

Answer 2

.

체크 박스를 클릭하면 React는 이전 값과 다음 값을 비교하여 변경이 발생했는지 여부를 결정합니다. 이벤트가 있으면 변경 이벤트가 대기합니다.

handleToggle이 호출되기 전에 React가 확인한 값에 대해 DOM을 쿼리 한 것으로 보이므로 확인란 값은 True입니다. 그런 다음 preventDefault()이 실행되어 DOM의 확인란 값이 이제 거짓이지만 React가 값을 True로 설정합니다.

따라서 preventDefault() 확인란을 사용하면 (라디오 버튼 일 수도 있습니다) DOM과 React간에 불일치가 발생합니다.