javascript - 使用钩子将光标放在自定义 React 功能组件的末尾

Question

在我的组件中，我有 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 和 useEffect 但我无法理解正确的方法。

先感谢您

标签： javascriptreactjsreact-hooks