时间戳

首页 > 解决方案 > Reactjs - 调用自定义函数以在用户键入时替换字符

reactjs - Reactjs - 调用自定义函数以在用户键入时替换字符

问题描述

我在我的 React 应用程序中输入了一个电话号码。我想将用户键入的非数字字符替换为空格。我编写了以下正则表达式函数来做到这一点：

实用程序.js

/**
 * Phone Number - Only allow numbers
 */
export const phoneReplacer = el => {
  let elem = new d(el)
  let regex = /[^0-9]/i

  elem.on('keyup', e => {
    let value = e.currentTarget.value
    elem.setValue(value.replace(regex, ''))
  })
}

如何将其连接到我的输入组件，如下所示：

import React from 'react'
import PropTypes from 'prop-types'
import TextInput from '../others/input/text'
import phoneReplacer from '../../../utils'

const PhoneInput = ({ value, change }) => (
  <div className="edit_phone_div">
    <TextInput
      type="text"
      placeholder="Phone Number"
      value={value}
      valueChange={e => change('phone', e)}
    />
  </div>
)

标签： reactjs

解决方案

解决此问题的最佳方法是使用受控组件。

您可以通过多种方式使用您的正则表达式，但我更喜欢使用它的方式如下：

import React from "react";
import ReactDom from "react-dom";

class TelInput extends React.Component {
  state = { value: "" };

  telChange = e => {
    let text = e.target.value;

    text = text.replace(/[\D]+/g, " ");

    this.setState({ value: text });
  };

  render() {
    return (
      <input
        type="tel"
        placeholder="Phone Number"
        value={this.state.value}
        onChange={this.telChange}
      />
    );
  }
}

const rootElement = document.getElementById("root");
ReactDom.render(<TelInput />, rootElement);

如果您仍然想使用您的实用程序函数，您仍然可以从内部telChange（在这种情况下）调用它，它可以为您执行逻辑，我text = text.replace(/[\D]+/g, " ");在这种情况下所做的。这样，您可以将该行替换为：

text = phoneReplacer(text) // From utils.js

你会得到两全其美的。

一般来说，您不想像实用程序函数那样尝试直接操作 DOM，您可以利用 react 本身来构建您正在寻找的功能。

干杯! 吉米

推荐阅读