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