i have simple form has couple of radio buttons aren't checking. each button has change event attached, still nothing changes. can not capture data, signify input selected?
the form
formcomponent = react.createclass({ proptypes: { label: react.proptypes.string, onchange: react.proptypes.func }, handleevent(e) { let {onchange} = this.props; console.log(e); }, render() { const {label} = this.props; return ( <form classname="lm-widget__form lm-flex-row"> <fieldset classname="lm-flex-row__column lm-h-flex-50"> <radioset group='radio-group' label={label} radios={[ { value: 'new', checked: true, changeevent: this.handleevent, text: 'radio one' }, { value: 'old', checked: false, changeevent: this.handleevent, text: 'radio two' } ]} /> </fieldset> </form> ) } }); the radio buttons
radioset = react.createclass({ proptypes: { group: react.proptypes.string.isrequired, label: react.proptypes.string, radios: react.proptypes.arrayof( react.proptypes.shape({ value: react.proptypes.string.isrequired, checked: react.proptypes.bool.isrequired, changeevent: react.proptypes.func.isrequired, text: react.proptypes.string.isrequired }) ).isrequired }, render: function () { const {group, label, radios} = this.props; const self = this; if (label) { return( <div classname="lm-widget-form__label"> <div classname="small">{label}</div> <div classname="segment-controls"> {radios.map(function(radio, i){ return ( <div key={i} classname="segment-controls__group-item"> <input type="radio" name={self.props.group} classname="segment-controls__button" id={`radio-${i}`} value={radio.value} checked={radio.checked} onchange={radio.changeevent} /> <label htmlfor={`radio-${i}`} classname="segment-controls__label"> <span classname="segment-controls__label-text"> {radio.text} </span> </label> </div> ); }) } </div> </div> ) } else { return ( <div classname="segment-controls"> {this.props.radios.map(function(radio, i){ return ( <div key={radio.value} classname="segment-controls__group-item"> <input type="radio" name={self.props.group} classname="segment-controls__button" id={`radio-${i}`} value={radio.value} checked={radio.checked} onchange={radio.changeevent} /> <label htmlfor={`radio-${i}`} classname="segment-controls__label"> <span classname="segment-controls__label-text"> {radio.text} </span> </label> </div> ); }) } </div> ); } } });
so issue you're telling first radio button it's checked every time passing true it.
if change first bit of code use setstate should work.
formcomponent = react.createclass({ getinitialstate() { return { checkedindex: 0 }; }, proptypes: { label: react.proptypes.string, onchange: react.proptypes.func }, handleevent(index, e) { this.setstate({ checkedindex: index }); let {onchange} = this.props; console.log(e); }, render() { const {label} = this.props; const radios = [ { value: 'new', checked: false, changeevent: this.handleevent.bind(this, 0), text: 'radio one' }, { value: 'old', checked: false, changeevent: this.handleevent.bind(this, 1), text: 'radio two' } ]; radios[this.state.checkedindex].checked = true; return ( <form classname="lm-widget__form lm-flex-row"> <fieldset classname="lm-flex-row__column lm-h-flex-50"> <radioset group='radio-group' label={label} radios={radios} /> </fieldset> </form> ) } }); also note using bind maintain this context of handleevent , pass in proper index.
Comments
Post a Comment