Question

我的要求：

输入必须保留浮点数，不允许使用字母和其他字符
在状态下应将其保留为数字，而不是字符串，因为已对其进行了许多计算
我想防止在输入中显示前导零，例如000123.45

我的代码：

App.js：

import React from 'react'
import PropTypes from 'prop-types'

class App extends React.Component {
    static defaultProps = {
        Quantity: 0,
    }
    static propTypes = {
        Quantity: PropTypes.number,
        HandleQuantityChange: PropTypes.func,
    } 

    constructor(props) {
        super(props)
    } 

    render(){
        return (
            <div style={{padding:'30px'}}>
                <input 
                    type='number'
                    name='quantity' 
                    value={this.props.Quantity != null ? this.props.Quantity : ''}
                    onChange={this.props.HandleQuantityChange} 
                    onBlur={this.props.HandleQuantityChange} 
                    onKeyUp={this.props.HandleQuantityChange} 
                />
            </div>
        )
    }
}

export default App

AppContainer.js：

import React from 'react'
import App from './App'

export default class AppContainer extends React.Component {

    constructor(props) {
        super(props)

        this.state = {
            quantity: 0
        }
    }

    handleQuantityChange = (e) => {
        if(e.type === 'blur' || e.key === 'Enter'){
            console.log('blur', e.target.value)
            const newQuantity = e.target.value != '' ? parseFloat(e.target.value) : 0
            this.setState({
                quantity: newQuantity
            })            
        } else {
            const newQuantity = e.target.value != '' ? parseFloat(e.target.value) : null
            this.setState({
                quantity: newQuantity
            })
        }
    }

    render() {
        return(
            <App
                Quantity={ this.state.quantity }
                HandleQuantityChange={this.handleQuantityChange}
            />
        )
    }
}

处理程序中的if-else构造是将“输入进行中”（else）与“输入最终编号”（if）区分。没有这个，我就不能输入负数，因为简单字符“-”不是数字，不能由parseFloat()解析。

在我当前的代码版本中，前导零仍然存在问题-我应该更改什么？

Answer 1

最后，我发现解决方案可以满足要求（下面的代码）。

由于react通过传递的value道具来比较输入中的值，首先将它们都转换为数字，因此输入000.123和状态0.123之间没有区别，因此值{{1 }} 保持不变。这就是为什么我要进行两次000.123的原因：首先使用不同于当前值的值，然后使用要设置的实际值。

App.js：

setState

AppContainer.js

import React from 'react'
import PropTypes from 'prop-types'

class App extends React.Component {
    static defaultProps = {
        Quantity: 0,
    }
    static propTypes = {
        Quantity: PropTypes.number,
        HandleQuantityChange: PropTypes.func,
    } 

    constructor(props) {
        super(props)
    } 

    render(){
        return (
                <input 
                    type='number'
                    name='quantity' 
                    value={this.props.Quantity != null ? this.props.Quantity : ''}
                    onChange={this.props.HandleQuantityChange} 
                    onBlur={this.props.HandleQuantityChange} 
                    onKeyUp={this.props.HandleQuantityChange} 
                />
        )
    }
}

export default App

如何定义输入以在reactjs中保留浮点数

1 个答案: