Question

我正在尝试创建仅允许使用正数（包括十进制值）的输入元素。它不能有前导零，它不允许用户在字段中复制/粘贴无效值（例如-14.5）。

到目前为止我所拥有的：

<input type="number" onChange={this.handleChange} value={this.state.value}/>

private handleChange= (e) => {
        let amount = parseFloat(e.target.value);

        if (isNaN(amount) || amount < 0) {
            amount = 0;
        }

        this.setState({value: amount});
}

此方法起作用，除了它始终保持前导零。我该如何解决？

Answer 1

以下内容将检查第一个位置是否为零。

e.target.value.indexOf('0') === 0

注意：对于输入，keyup事件比onclick事件更可取。

App.jsx

import React from 'react';

class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            value: ''
        }

        this.handleChange = this.handleChange.bind(this);
    }

    render() {
        return (
            <div>
                <input type="number" onChange={this.handleChange} value={this.state.value} />   
            </div>
        )
    }

    handleChange(e) {
        let amount = parseFloat(e.target.value);

        if (isNaN(amount) || amount < 0 || e.target.value[0] === '0') {
            amount = '';
        }

        this.setState({value: amount});
    }
}

export default App;

Answer 2

如果设置状态为NaN或negative，则不执行设置状态。然后，当您打算插入任何错误内容时，它只会更改任何内容。

html输入元素中仅允许正值（包括十进制值）

2 个答案: