时间戳

首页 > 解决方案 > 响应多个 onChange 和 value 作为回报

javascript - 响应多个 onChange 和 value 作为回报

问题描述

我正在尝试在文本字段中设置最大输入值，但似乎无法使其正常工作。

我有 2onChange和价值观，我认为这是问题所在。不确定解决方法

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

然后我有我的 return 语句，它有 2 个 onchanges 和 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>
  );
}

标签： javascriptreactjsmaterial-ui

解决方案

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

您还可以在CodeSandbox中与我的演示互动

编辑：

删除：

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

添加：

+ return maxvalue.substring(0, 11);

推荐阅读