Only Allowing Numbers Upto Certain Length in Material Ui

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

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))}
    />
  );
}

Put length constraint in a TextField in react js

I found another solution here.

<TextField
    required
    id="required"
    label="Required"
    defaultValue="Hello World"
    onInput = {(e) =>{
        e.target.value = Math.max(0, parseInt(e.target.value) ).toString().slice(0,12)
    }}/>

How can I set material-ui TextField to accept only Hexidecimal characters

See the Formatted Inputs portion of the documentation.

Here is an example I put together (using the formatted inputs demo code as a starting point) using react-text-mask that only accepts up to 8 hexidecimal characters:

React.js material-ui: How to format Textfield as an amount

Ciao, here a working example. I have used exactly the same example reported in Material-ui docs (simplyfied) using react-number-format, and to show a fixed number of decimal I used toFixed(2).

Limiting table selects not working - material UI table - react

I figured out the solution that works best for my use case. I didn't need a ternary. I didn't need a second onclick function to handle for just the deselect only. That was causing a problem because when a user would select a row that was already selected, the selected index returned was -1 which I wasn't handling in the handleRemoveOnly function. I didn't think I needed too. Either way, I have a much more elegant solution now.

One onclick and extra if on the '-1' for unselected rows. No need to disable the table with ternary like I was doing. This works better for my use case.

Here is a the new onclick function

   handleClick = (event, id) => {
const { selected } = this.state;
const selectedIndex = selected.indexOf(id);
let newSelected = [];

if (selectedIndex === -1 && selected.length > 1) {
  console.log("hc0::", selectedIndex);
  newSelected = newSelected.concat(selected.slice(selected));
} else if (selectedIndex === -1) {
  console.log("hc1::", selectedIndex);
  newSelected = newSelected.concat(selected, id);
} else if (selectedIndex === 0) {
  console.log("hc2::", selectedIndex);
  newSelected = newSelected.concat(selected.slice(1));
} else if (selectedIndex === selected.length - 1) {
  console.log("hc3::", selectedIndex);
  newSelected = newSelected.concat(selected.slice(0, -1));
} else if (selectedIndex > 0) {
  console.log("hc4::", selectedIndex);
  newSelected = newSelected.concat(
    selected.slice(0, selectedIndex),
    selected.slice(selectedIndex + 1)
  );
}

Here are the code sandboxs

bad sandbox: https://codesandbox.io/s/yw8zl6oqk9

fixed sandbox: https://codesandbox.io/s/m4vk5w20lx

Hope this helps someone.

---

Related Topics