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>
    );
  }
}

我不知道我是否正确使用（使用refs），因为console.log（React.findDOMNode（this.refs.cardInput））返回null o_O

P.S。 .mask来自http://igorescobar.github.io/jQuery-Mask-Plugin/

Answer 1

必须将mask函数应用于jquery对象，而不是普通的dom元素，并且还需要将此行放在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);
}

但是，此插件的回调选项仍需要与react生命周期方法集成。首先尝试使它成为一个不受控制的组件（使用defaultValue而不是value）并检查它是否有效。

Answer 2

每次进行更改时都会渲染this.state.value，这会覆盖蒙版。

渲染覆盖了掩码。

您需要移动mask（）进行渲染，以便在写入dom之前屏蔽该值。

计算数据：不要担心基于状态预先计算值 - 如果在render（）中进行所有计算，则更容易确保UI是一致的。例如，如果状态中有一个列表项数组，并且您希望将计数呈现为字符串，则只需在render（）方法中呈现this.state.listItems.length +'list items'，而不是将其存储在状态中。 https://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html

在React中输入掩码卡号

2 个答案: