Question

我正在尝试使用从 Material-ui 中选择。我想将 prevState 设置为默认值。我可以选择该值并将其保存在我的表中，但无法将该状态设置为默认值。

请找到代码

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

<Dialog
        open={isOpen}
        onClose={handleClose}
        aria-labelledby="form-dialog-title"
        fullWidth
      >
        <DialogTitle id="form-dialog-title">Edit</DialogTitle>
        <DialogContent>
          <FormControl fullWidth>
            <InputLabel shrink id="inputLabel">
              Select severity
            </InputLabel>
            <Select
              labelId="inputLabel"
              id="severity"
              value={value ? value : ""}
              defaultValue={value} //how to set the prevState in here
              onChange={handleChange}
              displayEmpty
              fullWidth
              MenuProps={{
                anchorOrigin: {
                  vertical: "bottom",
                  horizontal: "left",
                },
                transformOrigin: {
                  vertical: "top",
                  horizontal: "left",
                },
                getContentAnchorEl: null,
              }}
            >
              <MenuItem value={"1"}>High</MenuItem>
              <MenuItem value={"2"}>Medium</MenuItem>
              <MenuItem value={"3"}>Low</MenuItem>
            </Select>
          </FormControl>
        </DialogContent>
        <DialogActions>
          <Button onClick={handleClose} variant="contained">
            Cancel
          </Button>
          <Button
            onClick={handleChangeSeverity}
            variant="contained"
            color="secondary"
          >
            OK
          </Button>
        </DialogActions>
        Current Value: {value}
      </Dialog>

请找到下面的图片。我已经选择了低并保存了它。当我再次打开选择时，它向我显示了空字段。我想在突出显示的区域显示我现有的菜单项（低/中/高）！

谢谢！！

Answer 1

在 handleChange 事件处理程序上，调用 setValue setter 以设置 value 状态

const handleChange = (event) => {
  setValue(event.target.value)
}

Answer 2

您不应在同一个表单元素上使用“value”和“defaultValue”。请参阅此https://deepscan.io/docs/rules/react-misused-controlled-component。如果您希望预先选择其中一个值，请使用该值启动您的状态对象

为了维护 2 个不同的值，此代码可能会有所帮助。我没有使用 Material 组件，但这应该会有所帮助。谢谢。

const selectPriority = () => {
    // you might want to condier using a separate property for previous and new value
    // here i am using an object you can use 2 separate states as well
    const [userValue, setUserValue] = useState({previousValue: "", newValue: "1"});
    const handleChange = (event) => {
        const oldValue = userValue.newValue;
        // here I update both the previousValue (to old value) and newValue (to new selection)
        setUserValue({
            ...userValue, previousValue: oldValue, newValue: event.target.value
        });
    }
    return (<div>
                <select
                  id="severity"
                  value={userValue.newValue}
                  onChange={handleChange}
                >
                  <option value={"1"}>High</option>
                  <option value={"2"}>Medium</option>
                  <option value={"3"}>Low</option>
                </select>
                {userValue.previousValue} - {userValue.newValue}
              </div>
    );
}

如何在react material-ui select中将以前的状态设置为默认值

2 个答案: