在 ReactJS 的文本区域（或文本字段）中识别用户的文本对齐选择并控制文本对齐显示

Question

我已经构建了an app，它显示了许多文本区域。我个人使用两种语言的应用程序 - 英语和另一种向右对齐的语言。默认情况下，文本区域向左对齐。如果我想改变它们并将它们向右对齐，我可以简单地按右 CTR+Shift。该应用程序是在 React 中构建的，当屏幕重新渲染时，它会再次向左对齐。我想以某种方式控制对齐 - 识别用户是否选择以某种方式对齐，并将其保存到状态。我如何识别用户如何选择对齐文本，或者他是否按右或左 CTR+Shift？以及如何更改文本区域以控制对齐方式？

Answer 1

const alignment = ['left', 'right', 'center'];

class Example extends React.component {
  constructor() {
    super();

    this.state = { align: 'left' };

    this.handleKeyDown = this.handleKeyDown.bind(this);
  }

  handleKeyDown(e) { // Passes click event to state
    if (e.shiftKey && (e.metaKey || e.ctrlKey)) { // meta key for macbook support
      this.setState({ align: 'right' });
    }
  }

  render() {
    return (
      <div className={s.root}>
        <div style={{ textAlign: this.state.align }}> // Sets div text alignment
          <textarea onKeyDown={this.handleKeyDown} />
        </div>
      </div>
      );
    }
  }
}