i have the following component where the onChange is not triggering, it is quite simillar to the following post props onChange is not triggering however the solution isnt helping much
basically its creating a form based on a parsed xml, the inputGroup is correctly triggering the onchange function while the NumericInput isnt triggering the onchange.
any help appreciated.
<!-- language: lang-js -->
import React from 'react';
import { NumericInput, InputGroup,FormGroup } from "@blueprintjs/core";
import './palantir.css';
class Byte extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
}
handleChange(k,e) {
this.props.onConfigChange(k,e.target.value);
}
render() {
var minmaxlen = this.props.input_conf._minmaxlen;
var maxlen = minmaxlen != null ? minmaxlen.split("-")[1] :''
var minlen = minmaxlen != null ? minmaxlen.split("-")[0] :''
var minmaxvalue = this.props.input_conf._minmaxval;
var maxvalue = minmaxvalue != null ? minmaxvalue.split("-")[1] :''
var minvalue = minmaxvalue != null ? minmaxvalue.split("-")[0] :''
var pattern = this.props.input_conf._regex ? 'pattern='+this.props.input_conf._regex : ''
console.log('minvalue================',minvalue)
if(minvalue == '') {
if(this.props.input_conf._regex != null) {
return (
<FormGroup
className="formatcard"
label={this.props.conf_name}
labelFor="text-input" inline="true">
<InputGroup pattern={this.props.input_conf._regex || ''} minLength={minlen || ''} maxLength={maxlen || ''}
placeholder="Placeholder text" value={this.props.input_conf.value || ''}
onChange={e => this.handleChange(this.props.input_conf.ID, e)} />
</FormGroup>
);
} else {
return (
<FormGroup
className="formatcard"
label={this.props.conf_name}
labelFor="text-input" inline="true">
<InputGroup minLength={minlen || ''} maxLength={maxlen || ''}
placeholder="Placeholder text" value={this.props.input_conf.value || ''}
onChange={e => this.handleChange(this.props.input_conf.ID, e)} />
</FormGroup>
);
}
} else {
return (
//this part is causing issue the numeric input is not triggering the onchange function and not updating the state
<FormGroup
className="formatcard"
label={this.props.conf_name}
labelFor="text-input" inline="true">
<NumericInput allowNumericCharactersOnly="true" clampValueOnBlur="true"
min = {minvalue || ''} max ={maxvalue || ''} placeholder="Placeholder text" value={this.props.input_conf.value || ''}
onChange={e => this.handleChange(this.props.input_conf.ID, e)} />
</FormGroup>
);
}
}
}
export default Byte;
<!-- end snippet -->
