Question

91

React material-ui textfield decimal step of 1.00 on 1.00 as a default number

rated 0 times [ 98] [ 7] / answers: 1 / hits: 25765 / 3 Years ago, tue, march 23, 2021, 12:00:00

I'm using react material ui with this Textfield:

<TextField 

    required

    id="qty" 

    type="number"

    label="Qtà" 

    defaultValue={!props.row.qty ? '1.00' : props.row.qty} 

    step={1.00}

    variant="outlined" 

    error={HP_qty.length === 0 ? false : true}

    helperText={HP_qty}

    inputProps={{

      maxLength: 13,

    }}

    onBlur={(e) => onBlur(e,HP_qty)}/>

I would like to use the arrows in order to have a 1.00 step so on 1.00 as a default number i can visualize the 2.00 or the 0.00 number.
the result for now is: 1.00 -> (arrow up) -> 2 so basically it removes zeros that I would like to have.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

domeniccolti

Add To Favorites

Follow

Total Points: 276

Total Questions: 98

Total Answers: 93

Location: India

Member since Fri, May 13, 2022

2 Years ago

domeniccolti questions

1 MUI Autocomplete custom options, not showing selected option

Mon, Oct 18, 21, 00:00, 3 Years ago

1 Discord.JS V13 client.on messagecreate not firing

Thu, Oct 14, 21, 00:00, 3 Years ago

1 Using Fetch API to create a Login form

Thu, Jul 15, 21, 00:00, 3 Years ago

1 React JS - How to detect navigator.platform in Next JS

Sat, Oct 24, 20, 00:00, 4 Years ago

1 jsPDF is not defined in javascript

Thu, Sep 3, 20, 00:00, 4 Years ago

View All

answered 3 Years ago peytont · Accepted Answer

Use controlled TextField and format the number every time change event fires. See this answer.

Also note that the value displayed in the TextField is now a string so you may want to convert it back to number before submitting your changes.

function App() {

  const [value, setValue] = useState("0.0");

  return (

    <TextField

      type="number"

      value={value}

      variant="outlined"

      inputProps={{

        maxLength: 13,

        step: "1"

      }}

      onChange={(e) => setValue(parseFloat(e.target.value).toFixed(1))}

    />

  );

}