Saya ingin mengubah warna awal teks di objek CurrencyInput. Saat ini, saya dapat mengontrol warna teks hanya setelah mengetik di input. Warna awal saat dimuat adalah abu-abu. Setelah saya mulai mengetik input, itu diformat dalam $aqua-blue (#29bbe3).

   <CurrencyInput 
       placeholder="$0.00" 
       type="text"
       value={this.state.salary}
       onChange ={this.onSalaryChange}
   />

Menggunakan komponen ini:

import React from 'react';
import PropTypes from 'prop-types';
import MaskedInput from 'react-text-mask';
import createNumberMask from 'text-mask-addons/dist/createNumberMask';

const defaultMaskOptions = {
  prefix: '$',
  suffix: '',
  includeThousandsSeparator: true,
  thousandsSeparatorSymbol: ',',
  allowDecimal: true,
  decimalSymbol: '.',
  decimalLimit: 2, // how many digits allowed after the decimal
  integerLimit: 7, // limit length of integer numbers
  allowNegative: false,
  allowLeadingZeroes: false
}

const CurrencyInput = ({ maskOptions, ...inputProps }) => {
  const currencyMask = createNumberMask({
    ...defaultMaskOptions,
    ...maskOptions,
  })

  return <MaskedInput mask={currencyMask} {...inputProps} />
}

CurrencyInput.defaultProps = {
  inputMode: 'numeric',
  maskOptions: {},
}

CurrencyInput.propTypes = {
    inputmode: PropTypes.string,
    maskOptions: PropTypes.shape({
      prefix: PropTypes.string,
      suffix: PropTypes.string,
      includeThousandsSeparator: PropTypes.boolean,
      thousandsSeparatorSymbol: PropTypes.string,
      allowDecimal: PropTypes.boolean,
      decimalSymbol: PropTypes.string,
      decimalLimit: PropTypes.string,
      requireDecimal: PropTypes.boolean,
      allowNegative: PropTypes.boolean,
      allowLeadingZeroes: PropTypes.boolean,
      integerLimit: PropTypes.number,
  }),
}

export default CurrencyInput;

Dan menggunakan css ini:

input {
    color: $aqua-blue;
  }

Hargai bantuan apa pun. Terima kasih

0
plivak 1 Mei 2021, 19:03

2 jawaban

Jawaban Terbaik

Anda dapat mengubah warna teks placeholder seperti di bawah ini

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: $aqua-blue;
  opacity: 1; /* Firefox */
}
0
Amila Senadheera 3 Mei 2021, 03:04

Dalam komponen CurrencyInput Anda, Anda harus membungkusnya dengan komponen bergaya seperti di bawah ini dan memberikan prop yang mengatakan apa warnanya. Saya kira Anda perlu mengubah warna tergantung pada nilai salary.

Tambahkan styled-components paket npm terlebih dahulu, di CurrencyInput Anda, lakukan perubahan berikut,

import styled from "styled-components";

const CurrencyInput = ({ maskOptions, inputColor, ...inputProps }) => {
  const currencyMask = createNumberMask({
    ...defaultMaskOptions,
    ...maskOptions,
  });

  const StyledCurrencyInput = styled.input`
    color: ${inputColor};
  `;

  return (
    <MaskedInput
      mask={currencyMask}
      {...inputProps}
      render={(ref, props) => <StyledCurrencyInput ref={ref} {...props} />}
    />
  );
};

Di komponen Anda di mana CurrencyInput digunakan, Anda dapat membuat fungsi seperti di bawah ini untuk mengubah warna tergantung pada salary,

resolveInputColor = () => {
   if(this.state.salary > 4000) {
      return 'red'
   }
   return 'blue' // default value
}

<CurrencyInput 
    placeholder="$0.00" 
    type="text"
    value={this.state.salary}
    onChange ={this.onSalaryChange}
    inputColor={this.resolveInputColor()}
/>

Semoga ini menyelesaikan masalah yang Anda maksudkan!

0
Amila Senadheera 1 Mei 2021, 17:18