onChange 不會在反應中觸發 NumericInput

Question

我有以下組件，其中 onChange 未觸發，它與以下帖子道具 onChange 未觸發非常相似，但解決方案並沒有太大幫助

基本上它基於解析的xml創建一個表單，inputGroup正確觸發onchange函數，而NumericInput沒有觸發onchange。

任何幫助表示贊賞。

    <!-- 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 -->

Answer 1

剛剛發現 numericInput 使用 onValueChange 而不是 onChange 以防萬一這對任何人有幫助:)

Answer 2

您可以檢查組件的所有可用道具：

https://blueprintjs.com/docs/#core/components/numeric-input[NumvericInput-doc][1]