ToggleButtonGroup의 defaultValue를 설정할 수 없습니다.

Question

componentWillReceiveProps(nextProps)의 데이터가있는 ToggleButtonRadio 구성 요소를로드하면 defaultValue이 데이터가 들어올 때 정의되지 않은 채로 표시되고 업데이트되지 않습니다. 구성 요소를 만들 때 defaultValue이 설정되어 있기 때문에 데이터가 constructor(props)에서 오는 경우 구성 요소는 예상대로 작동합니다. 나는 내가 빠진 것이 무엇인지 알 수 없으므로 오류가 발생하지 않는다.

이것은 react-bootstrap 구성 요소입니다.

구성 요소 : ToggleButtonRadio

const ToggleButtonRadio = (props) => (
    <div> 
    <ButtonToolbar key={props.name}> 
     <ToggleButtonGroup type="radio" name={props.name} defaultValue={props.selectedOption}> 
     {props.options.map(opt => 
      <ToggleButton 
      key={opt} 
      value={opt} 
      onChange={props.controlFunc}>{opt} 
      </ToggleButton> 
     )} 
     </ToggleButtonGroup> 
    </ButtonToolbar> 
    </div> 
); 

페이지 : JobDetailsPage

export default class JobDetailsPage extends React.Component { 
    constructor(props) { 
    super(props); 

    const jobsCollection = props.jobsCollection; 
    const contractType = jobsCollection && jobsCollection.contractType; 

    this.state = { 
     contractType: contractType 
    }; 
    } 

    componentWillReceiveProps(nextProps) { 
    const jobsCollection = nextProps.jobsCollection; 
    const contractType = jobsCollection && jobsCollection.contractType; 

    this.setState({ 
     contractType: contractType 
    }); 
    } 

    render() { 
    return (
     <div> 
     <ToggleButtonRadio 
      options={['Permanent', 'Part time', 'Contract', 'Temp']} 
      name={'contractType'} 
      label={'Contract type'} 
      controlFunc={this.handleInputChange} 
      selectedOption={this.state.contractType} 
     /> 
     </div> 
    ); 
    } 
} 

Answer 1

키를 추가하는 것입니다 작동하는 것 같다 솔루션.

<ToggleButtonRadio 
key={this.state.contractType ? 'loaded' : 'notLoaded'} 
options={['Permanent', 'Part time', 'Contract', 'Temp']} 
name={'contractType'} 
label={'Contract type'} 
controlFunc={this.handleInputChange} 
selectedOption={this.state.contractType} 
/>