Estoy usando la biblioteca de entrada Antd, cada vez que escribo al principio o en medio de la palabra, mi cursor salta al final.
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) }} />La razón por la que su cursor siempre salta al final es porque su componente principal obtiene un nuevo estado y, por lo tanto, vuelve a representar sus componentes secundarios. Entonces, después de cada cambio, obtiene un componente de Input muy nuevo. Por lo tanto, puede manejar el cambio de valor dentro del componente en sí y luego intentar pasar el valor modificado al componente principal después del cambio O (y realmente lo recomendaría) usar algo como React Hook Form o Formik para manejar sus formularios . Tratar con formularios por su cuenta puede ser (especialmente para formularios complejos y anidados) muy difícil y termina en problemas de procesamiento como los que enfrenta ahora.
Ejemplo en 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' /> ) }