如何阻止 cursor 跳到底？

Question

我正在使用 Antd 輸入庫，每當我輸入單詞的開頭或中間時，我的 cursor 就會跳到結尾。

const handleOpenAnswer =( key, value )=>{
    handleFieldChange({
        settings: {
            ...settings,
            [key]: value
        }
    })
}
    
return (        
    <Input
        required
        size='default'
        placeholder='Label for Diference Open Answer Question'
        value='value'
        onChange={({ target: { value } }) => {
            handleOpenAnswer('differenceOpenAnswerLabel', value)
        }}
/>

Answer 1

您的 cursor 總是跳到最后的原因是因為您的父組件獲得了新的 state 並因此重新渲染其子組件。 因此，每次更改后，您都會獲得一個非常新的Input組件。 因此，您可以處理組件本身的值更改，然后嘗試在更改后將更改的值傳遞給父組件，或者（我真的建議）使用React Hook Form或Formik 之類的東西來處理 forms . 自己處理 forms 可能（尤其是對於復雜和嵌套的表單）非常困難，並且會以您現在面臨的渲染問題告終。

React-Hook-Form 中的示例：

import { FormProvider, useFormContext } = 'react-hook-form';

const Form = () => {
  const methods = useForm();
  const { getValues } = methods;
  
  const onSubmit = async () => {
    // whatever happens on submit
    console.log(getValues()); // will print your collected values without the pain
  }
  
  return (
    <FormProvider {...methods}>
        <form onSubmit={(e) => handleSubmit(onSubmit)(e)>
           {/* any components that you want */}
        </form>
    </FormProvider>
  );
}

const YourChildComponent = () => {
  const { register } = useFormContext();
  
  return (
    <Input
        {...register(`settings[${yourSettingsField}]`)}
        size='default'
        placeholder='Label for Diference Open Answer Question'
    />
  )
}