Reactjs 将道具发送到数字格式-材料UI文本字段

我想创建一个TextField元素来处理数字字段。我想动态处理这个组件，这样它不仅可以帮助我管理信用卡格式、电话等。我使用react number格式库的方式与Material UI示例相同。 我试图发送道具“前缀”和“格式”没有良好的结果。 我想知道如果我有办法的话，我应该如何发送这些属性。 提前谢谢

function NumberFormatCustom(props) {
  const { inputRef, onChange, ...other } = props;

  return (
    <NumberFormat
      {...other}
      getInputRef={inputRef}
      onValueChange={values => {
        onChange({
          target: {
            value: values.value
          }
        });
      }}     
      thousandSeparator={","}
      decimalSeparator={"."}
      isNumericString
      prefix={props.prefix} //"$"      
    />
  );
}

NumberFormatCustom.propTypes = {
  inputRef: PropTypes.func.isRequired,
  onChange: PropTypes.func.isRequired
};

class NumberTextField extends Component {
  state = {
    numberformat: this.props.value
  };

  handleChange = event => {
    const targetField = this.props.name;
    const targetValue = event.target.value;
    this.setState({
      ...this.state,
      numberformat: targetValue
    });
    this.props.updateCurrentUserFieldsOnChange(targetField, targetValue);
  };

  render() {
    const { fullWidth, label, name, readOnly, prefix } = this.props;
    return (
      <Fragment>
        <TextField
          fullWidth={fullWidth ? fullWidth : true}
          label={label ? label : "react-number-format"}
          name={name}
          value={this.state.numberformat}
          onChange={this.handleChange}          
          InputProps={{
            inputComponent: NumberFormatCustom,
            readOnly: Boolean(readOnly),
            prefix: prefix                        
          }}
        />
      </Fragment>
    );
  }
}

函数编号格式自定义（道具）{
const{inputRef，onChange，…other}=props；
返回(
{
一旦改变({
目标：{
值：values.value
}
});
}}     
千位分隔符={，“}
小数分隔符={“}
isNumericString
前缀={props.prefix}/“$”
/>
);
}
NumberFormatCustom.propTypes={
inputRef:PropTypes.func.isRequired，
onChange:PropTypes.func.isRequired
};
类NumberTextField扩展组件{
状态={
numberformat:this.props.value
};
handleChange=事件=>{
const targetField=this.props.name；
const targetValue=event.target.value；
这是我的国家({
…这个州，
numberformat:targetValue
});
this.props.updateCurrentUserFieldsOnChange（targetField，targetValue）；
};
render（）{
const{fullWidth，label，name，readOnly，prefix}=this.props；
返回(
);
}
}

您必须使用customInput道具，这将允许您集成材质ui的样式。你也可以通过一些道具来控制面具。如果你想要前缀，也可以使用前缀道具。千位数分隔符是一个布尔值，但默认情况下，数字用逗号分隔，如果您喜欢空格，只需添加它，如我的示例所示

从“反应数字格式”导入数字格式；
从“物料界面/文本字段”导入文本字段；
onChange（{target:{name，value:v}}}
/>

谢谢Alexandre，你的建议非常有用。我被材料ui解决方案弄糊涂了。非常感谢。