React - Reset компонентный вход

Question

У меня трудное время с компонентом, и я надеюсь, что вы, ребята, поможете мне. Итак, я создал пользовательский компонент, который возвращает отформатированное значение того, что пользователь вводил во вход (если пользователь напечатал «1999-9-9», он возвращает «1999-09-09 00:00»), а значение присваивается состоянию родителя (handleCustomInputValueChange). Теперь проблема заключается в том, что если я нажму на «числовой» тип, и я заполню ввод случайными символами, сохраните его и перейдите в «datetime», вход остается неизменным, он не сбрасывается или не работает, t получить данные из реквизита. Он имеет старое значение из «числа». Использование метода componentWillReceiveProps() во многих случаях было бы ответом на эту проблему, но не здесь, потому что все, что я хочу, - это отправить данные родителям. Мне не нужны эти данные для отправки обратно в мой «CustomInput».

Родитель компонент:

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; 
    } 

Детский компонент

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} />; 
    } 
} 

Так .. есть ли способ сбросить вход после переключения на другой тип?

Спасибо!

Answer 1

Вы не передавая данные о состоянии ребенка надлежащим образом, При прохождении data к ребенку, вы должны сделать,

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

Edit: Сделайте ваш ребенок слушать изменения реквизита, на основе этого набора значение государства.

Или вы можете изменить ваш ребенок делает это:

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