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，而是可以利用自身的反应来构建所需的功能。

干杯！吉米

Reactjs-调用自定义函数以替换字符作为用户类型

1 个答案: