Разрешить только положительные значения в элементе ввода html (включая десятичные значения)

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

Только не выполняйте установленное состояние, если оно NaN или negative.Затем, когда вы намереваетесь вставить что-то неправильно, это просто ничего не изменит.

Answer 2

Следующее будет проверять наличие нуля в первой позиции.

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;