Создание материалов, похожих на дизайн материалов с помощью Braintree Hosted Fields в ReactJS - PullRequest
Новая
       33

Создание материалов, похожих на дизайн материалов с помощью Braintree Hosted Fields в ReactJS

0 голосов
/ 05 декабря 2018

Я пытался воссоздать эффект ввода материала с помощью размещенных полей в React.Когда пользователь нажимает на поле, я бы хотел, чтобы ярлык двигался вверх и уменьшался.Мне удалось создать эффект, но метки не возвращаются в исходное состояние, если поле пустое.

Однако они возвращаются в исходное состояние, как только я щелкаю другое поле ввода и начинаю печатать, что, я думаю, вызывает обновление.

Код: 

class CheckoutFormSmall extends Component {
  constructor (props) {
  super(props)

  this.handleEmailChange = this.handleEmailChange.bind(this)
  this.handleNameChange = this.handleNameChange.bind(this)
  this.startQuantityUpdate = this.startQuantityUpdate.bind(this)
  this.stopQuantityUpdate = this.stopQuantityUpdate.bind(this)
  this.handleQuantityChange = this.handleQuantityChange.bind(this)
  this.onFailedUpdates = this.onFailedUpdates.bind(this)

  this.state = {
    numberIsEmpty: false,
    expdateIsEmpty: false,
    cvvIsEmpty: false,
    formValid: false, 
  }

  hostedFieldsInstance.on('notEmpty', event => {

      const number = event.fields.number
      const isEmpty = number.isEmpty

      this.setState({numberIsEmpty: !isEmpty })
    })

    hostedFieldsInstance.on('notEmpty', event => {

      const expirationDate = event.fields.expirationDate
      const isEmpty = expirationDate.isEmpty

      this.setState({expdateIsEmpty: !isEmpty })
    })

    hostedFieldsInstance.on('notEmpty', event => {

      const cvv = event.fields.cvv
      const isEmpty = cvv.isEmpty

      this.setState({cvvIsEmpty: !isEmpty })
    })

const inputStyleNumber = classNames({'input_full_hostedfields': this.state.numberIsEmpty })
const inputStyleExpirationDate = classNames({'input_full_hostedfields': this.state.expdateIsEmpty })
const inputStyleCvv = classNames({'input_full_hostedfields': this.state.cvvIsEmpty })

const forms = [
        {icon: 'credit card', label: 'Credit Card Number', id: 'card-number', className:inputStyleNumber},
        {icon: 'calendar outline', label: 'Expiration Date', id: 'expiration-date', className:inputStyleExpirationDate},
        {icon: 'check circle outline', label: 'CVV', id: 'cvv', className:inputStyleCvv}
].map(
        (data, i) => (
          <div className='form-item form-row'>
            <Icon className='form-icon' name={data.icon} />
            <div id={data.id} className='form-input-style hosted-fields-container hosted-field'>
              <label basic id='form-label-hostedfields' className={data.className}>{data.label} </label>
            </div>
          </div>
        )
    )

Я знаю, что это не самая чистая реализация этого (я очень начинающий программист), поэтому, пожалуйста, не стесняйтесь предлагать что-нибудь и все.

Заранее спасибо,

...