带react的输入掩蔽

如何使用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;