mercredi 23 novembre 2016

How can I implement a react callback

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