input 输入,从中间输入或删除后,光标都会移到最后面

新手上路,请多包涵
import React, { useState, useCallback, useEffect } from 'react';
import { Input } from 'antd';



export default function () {
    const [value, setValue] = useState<string>('test123');
    const [value1, setValue1] = useState<string>('test11111');
    return (
        <div className='main'>
            <IIInput
                value={value}
                onChange={(val) => { setValue(val); }}
            />
            <IInput
                value={value1}
                onChange={(val) => { setValue1(val); }}
            />
        </div>
    )
}



function IIInput(props: any) {
    const [value, setValue] = useState<string>(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 (
        <Input value={value} onChange={e => { handleSetState(e.target.value) }} />
    )
}

class IInput extends React.Component<any> {
    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 (
            <Input value={value} onChange={e => { this.handleChange(e.target.value) }} />
        )
    }
}

分别用类组件和函数组件进行测试
类组件输入框光标不会移至最后
函数组件输入框光标,每次从输入框中间进行操作后,都会移至最后
函数组件这个问题该如何解决,为什么会导致这个问题

阅读 5.3k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题