html - ReactJS处理文本区域中的制表符

Question

如何在 ReactJS 中处理 Tab 键按下事件，以便能够在文本区域内缩进文本？

当在文本区域上按下选项卡时，onChange 事件不会被触发，所以我想可能有一个更高级别的处理程序可以用来检测此事件。

Answer 1

onKeyDown={(e: React.KeyboardEvent) => {
  if (e.key === 'Tab' && !e.shiftKey) {
    e.preventDefault();
    const value = this.textareaRef.current!.value;
    const selectionStart = this.textareaRef.current!.selectionStart;
    const selectionEnd = this.textareaRef.current!.selectionEnd;
    this.textareaRef.current!.value =
      value.substring(0, selectionStart) + '  ' + value.substring(selectionEnd);
    this.textareaRef.current!.selectionStart = selectionEnd + 2 - (selectionEnd - selectionStart);
    this.textareaRef.current!.selectionEnd = selectionEnd + 2 - (selectionEnd - selectionStart);
  }
  if (e.key === 'Tab' && e.shiftKey) {
    e.preventDefault();
    const value = this.textareaRef.current!.value;
    const selectionStart = this.textareaRef.current!.selectionStart;
    const selectionEnd = this.textareaRef.current!.selectionEnd;

    const beforeStart = value
      .substring(0, selectionStart)
      .split('')
      .reverse()
      .join('');
    const indexOfTab = beforeStart.indexOf('  ');
    const indexOfNewline = beforeStart.indexOf('\n');

    if (indexOfTab !== -1 && indexOfTab < indexOfNewline) {
      this.textareaRef.current!.value =
        beforeStart
          .substring(indexOfTab + 2)
          .split('')
          .reverse()
          .join('') +
        beforeStart
          .substring(0, indexOfTab)
          .split('')
          .reverse()
          .join('') +
        value.substring(selectionEnd);

      this.textareaRef.current!.selectionStart = selectionStart - 2;
      this.textareaRef.current!.selectionEnd = selectionEnd - 2;
    }
  }
}}