如何阻止光标跳到末尾？

我正在使用 Antd 输入库，每当我在单词的开头或中间输入时，我的光标就会跳到结尾。

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)
        }}
/>

光标总是跳到末尾的原因是因为您的父组件获得了新状态，因此重新渲染了其子组件。所以每次改变之后你都会得到一个全新的Input成分。因此，您可以处理组件本身内的值更改，然后尝试在更改后将更改后的值传递给父组件，或者（我真的建议）您使用类似的东西反应钩子形式 or Formik处理您的表格。自己处理表单可能非常困难（特别是对于复杂和嵌套的表单），并且最终会导致像您现在面临的渲染问题。

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'
    />
  )
}