反应-重置组件输入

Question

I am having a hard time with a component and I am hoping that you guys will help me out. So I created a custom component that returns a formatted value of what the user typed in the input (if the user typed '1999-9-9', it returns '1999-09-09 00:00'), and the value is assigned to the state of the parent (handleCustomInputValueChange). Now.. the problem is that if I click on the 'numeric' type and I fill the input with random characters, save it and the go to 'datetime', the input remains unchanged, it doesn't reset or it doesn't get the data from props. It has the old value from the 'number'. Using componentWillReceiveProps() method, in many case would be the answer to this problem, but not here, because all I want is to send the data to the parent. I don't need that data to be sent back to my 'CustomInput'.

Parent component:

    handleCustomInputValueChange(changeEvent) {
        this.setState({value: changeEvent});
    }
    ...
    switch(type) {
        case 'NUMERIC':
            return <CustomInput data={value} type="numeric" callbackParent={handleCustomInputValueChange} />
            break;
        case 'DATETIME':
            return <CustomInput data={value} type="datetime" callbackParent={handleCustomInputValueChange} />
            break;
    }

Child component

export default class CustomInput extends Component {
    constructor(props) {
        super();

        this.state = {
            value: props.data || ''
        }
    }

    handleChange(event) {
        /* formatting data */
        callbackParent(formattedData);
    }

    render() {
        return <input type="text" onChange={this.handleChange} value={this.state.value} />;
    }
}

So.. is there any way to reset the input after switching to another type?

Thanks!

Answer 1

You are not passing the state data to the child properly, While passing the data to the child, you should do ,

<CustomInput data={this.state.value} type="numeric" callbackParent={handleCustomInputValueChange} />

Edit: Make your child listen for change in props, based on this set the state value.

Or you can change your child render to this:

 render() {
  const {data}   = this.props
        return <input type="text" onChange={this.handleChange} value={data?data:''} />;
    }