JAVA程序光标移到后面_input 输入，从中间输入或删除后，光标都会移到最后面...

import React, { useState, useCallback, useEffect } from 'react';

import { Input } from 'antd';

export default function () {

const [value, setValue] = useState('test123');

const [value1, setValue1] = useState('test11111');

return (

value={value}

onChange={(val) => { setValue(val); }}

/>

value={value1}

onChange={(val) => { setValue1(val); }}

/>

)

}

function IIInput(props: any) {

const [value, setValue] = useState(props.value);

useEffect(() => {

if ('value' in props && props.value !== value) {

setValue(props.value);

}

}, [props.value])

const handleSetState = useCallback((v: any) => {

if (!('value' in props)) {

setValue(v)

}

if (props.onChange) {

props.onChange(v);

}

}, [props])

return (

{ handleSetState(e.target.value) }} />

)

}

class IInput extends React.Component {

static getDerivedStateFromProps(nextProps, prevState) {

if ('value' in nextProps && nextProps.value !== prevState.value) {

console.log('update props')

return {

value: nextProps.value

}

}

return null;

}

state: any;

constructor(props) {

super(props);

this.state = {

value: props.value

}

}

handleChange(val: string) {

const props = this.props;

if (!('value' in props)) {

this.setState({

value: val

})

}

if (props.onChange) {

props.onChange(val);

}

}

render() {

const { value } = this.state;

return (

{ this.handleChange(e.target.value) }} />

)

}

}

分别用类组件和函数组件进行测试

类组件输入框光标不会移至最后

函数组件输入框光标，每次从输入框中间进行操作后，都会移至最后

函数组件这个问题该如何解决，为什么会导致这个问题