¿Cómo configurar el cuadro de entrada para que sea un número flotante en ReactJS?

Si queremos configurar el cuadro de entrada para que sea un número flotante , podemos usar el atributo de paso de la etiqueta de entrada . Tenemos que establecer el tipo de entrada como el número y el valor de paso por el que queremos aumentar/disminuir el número flotante. También podemos establecer atributos mínimos y máximos de modo que el número no disminuya después del valor mínimo y no aumente después del valor máximo.

Creando la aplicación React:

• Paso 1: Cree una aplicación React usando el siguiente comando:

  npx create-react-app foldername

• Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la carpeta, acceda a ella con el siguiente comando:

  cd foldername

Estructura del proyecto: Tendrá el siguiente aspecto.

Ejemplo:

import React from 'react'
  
class App extends React.Component {
  
  state = {
      value: 10
  }
  
  onValueChange = (event) => {
      this.setState({value:event.target.value})
  }
  
  render () {
    return (
      <td>
        <label> Floating Number: </label>
            <input
                type='number'
                step="0.1"
                min='0'
                max='20'
                value={this.state.value}
                onChange= {(event) => this.onValueChange(event)}
              />
      </td>
    )
  }
  
}
  
export default App;

Producción: