ControlledComponent.jsx

class ControlledInput extends React.Component {
    constructor(props) {
        super(props)
        this.state = { value: props.initialValue || '' }
    }

    componentDidUpdate(prevProps, prevState) {
        console.log(prevProps.initialValue, this.props.initialValue)
        if (prevProps.initialValue !== this.props.initialValue) {
            this.setState({ value: this.props.initialValue || '' })
        }
    }

    onChange = (ev) => {
        const { value } = ev.target
        this.setState({
            value
        }, () => {
            if (this.props.onChange) {
                this.props.onChange(this.state.value)
            }
        })
    }

    render() {
        const { initialValue, tag, onChange, ...rest } = this.props
        console.log('value', initialValue)
        const props = {
            ...rest,
            onChange: this.onChange,
            value: this.state.value,
        }
        return React.createElement(tag, props)
    }
}