React 中屏蔽卡号输入

IT技术 javascript reactjs
2021-05-10 09:07:37

我正在学习 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

ps .mask 来自http://igorescobar.github.io/jQuery-Mask-Plugin/

2个回答

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）并检查它是否有效。

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

遮罩正在被渲染覆盖。

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

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

其它你可能感兴趣的问题
上一篇ReactJS：从 api 获取数据并映射数据 下一篇启动 gcode 后的第一步，到开始位置（但在打印之前）太快了