Маска ввода номера карты в React

Question

Я учусь React и хотите сделать вход с двумя ограничениями:

• 16 номеров,
• поставить пробел после каждого четвёртого.

import React, { Component } from 'react'; 

export default class CardNumberInput extends Component { 
    constructor() { 
    super(); 
    this.state = { value: '' }; 
    } 

    handleChange(event) { 
    React.findDOMNode(this.refs.cardInput).mask("0000 0000 0000 0000"); 
    this.setState({ value: event.target.value }); 
    } 

    render() { 
    let value = this.state.value; 

    return (
     <div> 
     <label htmlFor="cardInput">Card Number: </label> 
     <input ref="cardInput" id="cardInput" onChange={this.handleChange} type="number" value={value} /> 
     </div> 
    ); 
    } 
} 

Я не знаю, правильно ли я делаю это правильно (использование рефами), потому что console.log (React.findDOMNode (this.refs.cardInput)) возвращает нуль его

P.S. .mask от http://igorescobar.github.io/jQuery-Mask-Plugin/

Answer 1

Функция маска должна быть применена к Jquery объекта, а не простой дом элемент, и вы также должны поставить эту строку в componentDidMount.

componentDidMount: function() { 
    var $input_elem = $(React.findDOMNode(this.refs.cardInput)); 
    // now you have a jquery object 
    $input_elem.mask("0000 0000 0000 0000", callback_options); 
} 

Однако параметры обратного вызова для этого плагина по-прежнему необходимо интегрировать с методами реагирования на жизненный цикл. Сначала попробуйте сделать его неконтролируемым компонентом (используйте defaultValue вместо значения) и убедитесь, что он работает.

Answer 2

Вы рендерите this.state.value каждый раз, когда вы делаете изменение, которое переписывает маску.

Маска заменяется визуализацией.

Вам нужно переместить маску() для рендеринга так, чтобы она маскировала значение перед записью в dom.

Вычисляемые данные: не беспокойтесь о предварительном вычислении значений на основе состояния - проще убедиться, что ваш интерфейс согласован, если вы выполняете все вычисления в render(). Например, если у вас есть массив элементов списка в состоянии, и вы хотите отобразить счет как строку, просто визуализируйте this.state.listItems.length + «элементы списка» в вашем методе render(), а не сохраните его в состоянии , https://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html