Question

如何使用react进行输入屏蔽：

这是我到目前为止所拥有的。我似乎无法正确更新值，我还希望光标在输入时单击它们的开头。我有点被困在这里。

输入的预期输出：类似0_ / _ _ =＆gt; 0 9 / 0 _ =＆gt; 0 9 / 0 9

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      inputValue: ''
    };

    this.update = this.update.bind(this);
  }
  update(e) {
    e.preventDefault();
    const formatString = '_ _ / _ _';
    const newString = `${e.target.value}${formatString.slice(
      e.target.value.length
    )}}`;
    this.setState({ [e.target.name]: newString });
  }
  render() {
    return (
      <div>
        <input
          type="text"
          onChange={this.update}
          name="inputValue"
          value={this.state.inputValue}
          onFocus={() => this.setState({ inputValue: '_ _ / _ _' })}
        />
      </div>
    );
  }
}

export default App;

Answer 1

每次在输入框中键入新字符时，都会调用

onChange事件。所以你只需要该字符串的最后一个字符。这样做如下。

const lastChar = e.target.value[e.target.value.length - 1];

现在您需要在格式化字符串中的微粒位置替换它。为了跟踪位置，我正在使用count状态变量。更新count变量是一个非常简单的逻辑，特定于输入字符串（位置0,2,6,8需要以相同的顺序替换）。最后，您将使用刚刚提取的最后一个字符替换该特定位置。

const newString = prevString.substr(0, count) + lastChar + prevString.substr(count + 1);

这是工作示例。 https://codesandbox.io/s/432608n5w7

用React输入掩码

1 个答案: