MUI v5 破坏了默认的 TextField 行为

Question

当我们在 TextField 中写完评论时，TextField 具有焦点，当我们单击 Done 时没有任何反应。 第一次单击会从 TextField 中移除焦点。 第二次按下按钮结束该过程。

    <TextField
      id={'generalComment'}
      value={comment}
      label="Общий комментарий"
      multiline
      minRows={7}
      onChange={onCommentChange}
      onBlur={onCommentSubmit}
      variant="outlined"
      margin="normal"
      required
      error={!!commentError}
      helperText={commentError}
      InputLabelProps={{
        shrink: true,
      }}
      inputProps={{maxLength: 2000}}
      className={classNames({[classes.importantField]: !comment})}
    />

如果从字段中移除焦点，onBlur 工作正常。 但是按钮的 onClick 在第一次点击时不起作用。

onBlur 拦截 UI 按钮上的点击事件并阻止触发这些事件。

如何编写 onBlur，以便即使焦点位于 TextField 上，按钮也能第一次工作？

    const onCommentSubmit= event => {
       console.log("BLUR");
       const value = event.target.value.trim();
       setGeneralComment(value);
       onGeneralCommentSubmit(value);
    };

预期行为按钮应该在第一次点击时起作用。 多次按下按钮是不合逻辑的。

重现步骤的步骤：

1. 创建一个具有 TextField 和按钮的组件。
2. 创建点击处理程序
3. 填写字段
4. 点击按钮

上下文我希望第一次按下按钮。 这样焦点就不会挡住用户界面。

我的环境npx @mui/envinfo

System:                                                   
    OS: Windows 10 10.0.19044                               
  Binaries:                                                 
    Node: 16.13.0 - C:\Program Files\nodejs\node.EXE        
    Yarn: 1.22.17 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 8.5.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: Google Chrome
    Edge: Spartan (44.19041.1266.0), Chromium (99.0.1150.36)
  npmPackages:
    @emotion/react: 11.8.1 => 11.8.1
    @emotion/styled: 11.8.1 => 11.8.1
    @mui/base:  5.0.0-alpha.70
    @mui/core: 5.0.0-alpha.54 => 5.0.0-alpha.54
    @mui/icons-material: 5.4.4 => 5.4.4
    @mui/lab: 5.0.0-alpha.71 => 5.0.0-alpha.71
    @mui/material: 5.4.4 => 5.4.4
    @mui/private-theming:  5.4.4
    @mui/styled-engine:  5.4.4
    @mui/styles: 5.4.4 => 5.4.4
    @mui/system:  5.4.4
    @mui/types:  7.1.2
    @mui/utils:  5.4.4
    @types/react:  17.0.39
    react: 17.0.2 => 17.0.2
    react-dom: 17.0.2 => 17.0.2
    typescript:  4.6.2

Answer 1

我认为您更改 state 的次数太多了。

我不会修剪 onBlur function 中的值。让用户键入他想要的任何内容并在提交之前修剪该值（如果我假设良好，则在onGeneralCommentSubmit function 内......我还假设setGeneralComment是 state 更新comment ）。 这样，您就不会在 onBlur 之后调用 rerender。 当然，这取决于onGeneralCommentSubmit中的内容。

 <TextField id={'generalComment'} value={comment} (...) onChange={onCommentChange} onBlur={onGeneralCommentSubmit} (...) /> const onGeneralCommentSubmit = (event) => { if (comment) { const value = comment.trim(); // do something with the value } };

在 Blur 上提交表单可能不是一个好习惯:)