Отправить реквизиты в Числовой формат - Материал Пользовательский интерфейс TextField - PullRequest
1 голос
/ 05 февраля 2020

Я хочу создать элемент TextField для обработки числовых полей. Я хочу динамически обрабатывать этот компонент, чтобы он помог мне не только управлять форматами кредитных карт, телефон и т. Д. c. Я использую библиотеку формата ответа-числа так же, как пример 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>
    );
  }
}

1 Ответ

2 голосов
/ 05 февраля 2020

Вы должны использовать реквизиты customInput, которые позволят вам интегрировать стиль Material-UI. Вы также можете передать несколько реквизитов, чтобы иметь возможность контролировать маску sh. Также, если вы хотите использовать префикс, просто используйте префиксный реквизит. Тысяча Separator является логическим значением, но по умолчанию числа разделены запятыми, если вы предпочитаете пробелы, просто добавьте его, как в моем примере

  import NumberFormat from 'react-number-format';

  import TextField from 'material-ui/TextField';

      <NumberFormat
        {...props}
        value={value}
        name={name}
        mask={mask}
        customInput={TextField}
        prefix={'$'}
        format={format || null}
        type="text"
        thousandSeparator={thousandSeparator ? ' ' : null}
        onValueChange={({ value: v }) => onChange({ target: { name, value: v } })}
      />

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...