在我的组件中，我有valuestate，它是文本的值，还有props.prevrequeststate，它存储使用enter键发送的上一个值。
我的目标是能够使用向上箭头显示以前的请求。
这是可行的，但当我按下向上箭头时，我也希望光标位于文本的末尾。
我不知道该怎么做。

import React, { useState, useRef} from 'react';
import Button from '@material-ui/core/Button';
import styles from 'styles/TextForm.module.css';

function TextForm(props) {
  const [valueState, setValueState] = useState('');
  const inputTextRef = useRef();

  function handleChange(e) {
    setValueState(e.target.value);
  }

  function submitText() {
    props.setBubbleTextState(valueState);
  }

  function handleKeyPress(e) {
    if (e.key === 'Enter') {
      submitText()
      setValueState('');
    }
    if (e.key === 'ArrowUp') {
      setValueState(props.prevRequestState);
    }
  }

  return (
    <div className={styles.container}>
      <input type="text" value={valueState} onChange={handleChange} className={styles.textForm} ref={inputTextRef}
             onKeyDown={handleKeyPress} placeholder='Entrez votre requête.' size='80'/>
      <Button variant="outlined" color="primary" onClick={submitText} className={styles.switchButton}> 
        Envoyer
      </Button>
    </div>
  );

}

export default TextForm;

我理解在handlekeypress（e）中使用：

e.input.selectionStart = props.prevRequestState.length
e.input.selectionStop = props.prevRequestState.length

将不工作，因为我的valuestate在按下箭头时未更新。
使用旧的setstate回调可以很好地工作，但是在这里，我不知道如何在状态更新时触发这个特定的操作，但是只有在这个特殊的向上箭头事件之后。我知道我需要结合使用useref和useffect，但我不知道正确的方法。
先谢谢你