反应：用最后两个输入数字设置值

Question

遇到情况，我不知道如何解决。在此输入中写入数字时，无论我输入多少个数字，我都只想看到最后插入的两个数字。例子：Input = 5  Value = 5Input = 59 Value = 59Input = 597 Value = 97Input = 5970 Value = 70Input = 59701 Value = 01等等。const [number, setNumber] = useState(0);function handleChange(e) {  setNumber(e.target.value);}return (  <div>    <input type="text" maxLength="2" value={number} onChange={handleChange} />  </div>)

Answer 1

转移到字符串

然后使用slice()剪切最后 2 个数字

const result = Number(e.target.value.toString().slice(-2));

const App = () => {

  const [number, setNumber] = React.useState(0);

  function handleChange(e) {

    const result = Number(e.target.value.toString().slice(-2));

    setNumber(result);

    console.log(result);

  }

  return (

    <div className="App">

      <input type="text" value={number} onChange={handleChange} />

    </div>

  );

}

ReactDOM.render(<App />, document.getElementById("root"));

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js"></script>

或者更复杂的方式如下

使用split()，pop()，join()

const x = e.target.value.toString().split('');

const y = [x.pop(), x.pop()].reverse();

const result = Number(y.join(''));

const App = () => {

  const [number, setNumber] = React.useState(0);

  function handleChange(e) {

    const x = e.target.value.toString().split('');

    const y = [x.pop(), x.pop()].reverse();

    const result = Number(y.join(''));

    setNumber(result);

    console.log(result);

  }

  return (

    <div className="App">

      <input type="text" value={number} onChange={handleChange} />

    </div>

  );

}

ReactDOM.render(<App />, document.getElementById("root"));

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js"></script>

一旦你完全控制了绑定到onChangeand的处理函数value，就不需要maxLength defaultValue相关的 props。