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

Question

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

utils.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>
)

Answer 1

解决此问题的最佳方法是使用controlled components。

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

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，就像您的实用程序功能正在尝试那样，您可以利用自身的反应来构建您正在寻找的功能。

干杯!吉米