React multiple onChange and value in return

Question

I'm trying to set a maximum input value in a text field, but can't seem to get it working.

I've got 2 onChange's and values which I think is the problem. Not sure a way around this

function Form({ onAddStudent }) {
  const [open, setOpen] = React.useState(false);
  const [number, setNumber] = React.useState(null);
  const handleClose = () => setOpen(false);
  const [maxnumber, setMaxNumber] = useState("");

  const handler = (event) => {
    const maxvalue = event.target.value;
    const setMaxValue = maxvalue <= 10 ? maxvalue : maxnumber;
    setMaxNumber(setSetValue);
  };

  const handleAdd = () => {
    onAddStudent(number);
    handleClose();
  };

then I have my return statement which has the 2 onchanges and values

  return (
    <div>
      <Button variant="contained" size ="small" fontSize="large" onClick={() => setOpen(true)}>
        </Button>
      <Dialog open={open} onClose={handleClose}>
        <DialogTitle>Number of Students</DialogTitle>
        <DialogContent>
          <DialogContentText>Students to Add:</DialogContentText>
          <TextField   
            onChange={(e) => {setNumber(e.target.value)}}
            value={number}
            onChange={handler}
            value={maxvalue}
          />
        </DialogContent>
        <DialogActions>
          <Button 
           onClick={handleClose}>Cancel</Button>
          <Button onClick={handleAdd}>Add</Button>
        </DialogActions>
      </Dialog>
    </div>
  );
}

score 0 · Answer 1 · answered Oct 25 '21 at 15:20

0

You can merge 2 handlers like this:

<TextField
  onChange={(e) => {
    setNumber(e.target.value);
    handler(e);
  }}
  value={number}
  onChange={handler}
  value={maxvalue}
/>

If you run this code:

<TextField
  onChange={(e) => {setNumber(e.target.value)}}
  onChange={handler}

Then the onChange prop below will override the above

answered Oct 25 '21 at 15:20

NearHuscarl

66,950
18
261
230

thanks for your answer. That doesn't seem to work either. I have change my code to this and doesn't work : {setNumber(e.target.value); handler(e);}} value={number} type="number" onChange={handler} InputProps={{ inputProps: { min: "0", max: "10", step: "1" } }} value={maxvalue} /> – user406480 Oct 25 '21 at 15:37
@user406480 you need to remove `value={maxValue}`, to constraint the value within a range, see [this](https://stackoverflow.com/a/67072685/9449426) answer. – NearHuscarl Oct 25 '21 at 15:43
@user406480 did my answer work out for you? If it's not I'll delete it. – NearHuscarl Oct 25 '21 at 18:56

German · Answer 2 · 2021-10-25T16:21:53.980

0

function Form({ onAddStudent }) {
  const [open, setOpen] = useState(false);
  const handleClose = () => setOpen(false);
  const [maxnumber, setMaxNumber] = useState("");

  const handler = (event) => {
    const maxvalue = event.target.value;
    setMaxNumber((prev) => {
      // only allow 11 characters
      return maxvalue.substring(0, 11);
    });
  };

  const handleAdd = () => {
    onAddStudent(maxnumber);
    handleClose();
  };

  return (
    <div>
      <Button
        variant="contained"
        size="small"
        fontSize="large"
        onClick={() => setOpen(true)}
      >
        Open
      </Button>
      <Dialog open={open} onClose={handleClose}>
        <DialogTitle>Number of Students</DialogTitle>
        <DialogContent>
          <DialogContentText>Students to Add:</DialogContentText>
          <TextField onChange={handler} value={maxnumber} />
        </DialogContent>
        <DialogActions>
          <Button onClick={handleClose}>Cancel</Button>
          <Button onClick={handleAdd}>Add</Button>
        </DialogActions>
      </Dialog>
    </div>
  );
}

You may also interact with my demo in the CodeSandbox

Edit:

Delete:

- const string = prev.length <= 10 ? maxvalue : maxvalue.substring(0, 10);
- return string;

Add:

+ return maxvalue.substring(0, 11);

edited Oct 25 '21 at 16:21

answered Oct 25 '21 at 16:02

German

1,126
8
20

thanks for answer. However, in the input box I can still input any value that is higher than the maximum. Do you know a way that when I go to input a value higher than the maximum it defaults back to maximum number? – user406480 Oct 25 '21 at 16:10
@user406480 it defaults back maxnumber original state which is an empty string is that what you mean ? – German Oct 25 '21 at 16:12
e.g. If I set the max value to 11, in the input I can still type '11111'. I would like that if I input '11111' it then goes to the max value possible e.g. 11. – user406480 Oct 25 '21 at 16:16
@user406480 hi check the code again. let me know if it works for you. – German Oct 25 '21 at 16:26
still not quite right. I was hoping for something like this https://codesandbox.io/s/47798104set-min-max-on-textfield-type-number-num06?file=/demo.tsx But struggling to include both the onchanges and values that I have – user406480 Oct 25 '21 at 16:31
@user406480 isn't that CodeSandbox you show me similar to my implementation but instead of accepting 11 chartacter it just accept 2 characters ? – German Oct 25 '21 at 16:55
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/238515/discussion-between-user406480-and-german). – user406480 Oct 25 '21 at 17:02

React multiple onChange and value in return

2 Answers2

Edit: