Im quite new to react and I am working on a registration page checkbox element
Below is my registration form
export default class MyRegisterForm extends Component {
static propTypes = {
answerGroupId: PropTypes.number,
onRegisterAnswers: PropTypes.func.isRequired,
};
constructor( props ) {
super( props );
this.state = {
answers: {},
};
}
handleAnswerChange = ( itemId, value ) => {
this.setState( {
answers: {
...this.state.answers,
[ itemId ]: value
},
}, () => this.updateSaveButtonStatus( this.props ) );
}
render() {
if ( !this.props.myAdherence ) {
return null;
}
return (
<div style={ styles.container }>
<ItemForm
parameterId={ this.props.parameterId }
items={ this.props.myAdherence.items }
answers={ this.state.answers }
onAnswerChange={ this.handleAnswerChange }
/>
</div>
);
}
}
The items are listed in the ItemForm,
renderItem = ( item ) => {
switch ( item.type ) {
case CHOICE:
if( item.isMultipleChoice ){
return (
<MultipleChoiceItem
key={ item.id }
itemId={ item.id }
selectedIndex={ this.props.answers[ item.id ] || [] }
options={ item.options }
onChange={ this.props.onAnswerChange }
/>
);
}
}
}
And below is the Multiple Choice component implementation,
const MultipleChoiceItem = ( { options, itemId, selectedIndex, onChange } ) => (
handleChange: function(checked){
const value = [];
options.map( option, i ) => (
value[ i ] = checked;
)
},
<Card>
{
options
.map( ( option, i ) => (
<LabeledCheckbox
id={ `multipleChoiceitem-checkbox-${ i }-${ itemId }` }
key={ i }
label={ option.text }
style={ styles.checkbox }
value={ '' + i }
onChange={ ( checked ) => onChange( itemId, [ i ], checked ) }
/>
) )
}
</Card>
);
What I want to do over here is to loop through the options and get there values in to an array named value and call back the handleAnswerChange in registration form and set the value over there. Can anyone tell me how I can archive that?
Thank you.
Aucun commentaire:
Enregistrer un commentaire