React中event.stopPropagation()在文本框按键事件中失效求助

你的代码有两个关键问题导致限制失效：

1. 错误使用了event.stopPropagation()：stopPropagation()仅阻止事件向上冒泡，但浏览器处理Enter键插入换行的默认行为并未被阻止，所以用户依然能输入换行。应该用event.preventDefault()来取消默认行为。
2. 换行次数的判断逻辑有误：假设DETAIL_MAX_LINES是允许的最大行数，那么换行符的数量应该是行数-1。比如最多允许3行，那最多只能有2个换行符。原代码的判断条件会让用户在达到最大行数后还能多输入一次换行。

修正后的代码如下：

const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
  const { code, target } = event;
  const { value } = target as HTMLInputElement;

  if (code === 'Enter') {
    // 计算当前已有的换行符数量
    const lineBreakCount = value.split('\n').length - 1;
    // 如果已达到最大行数，阻止默认换行行为
    if (lineBreakCount >= DETAIL_MAX_LINES - 1) {
      event.preventDefault();
    }
  }
};

对应的TextField组件保持不变：

<TextField
  onKeyDown={handleKeyDown}
  // 其他属性...
/>

额外补充：

• 用split('\n').length - 1计算换行次数比遍历字符更简洁高效。
• 若你的TextField设置了multiline={true}，这个逻辑依然适用，因为多行输入框的换行符处理逻辑一致。

内容的提问来源于stack exchange，提问作者has400