リアクション - コンポーネント入力をリセットする

Question

コンポーネントで苦労しています。皆さんが私を助けてくれることを願っています。 私は、ユーザーが入力に入力したもののフォーマットされた値を返します（ユーザーが '1999-9-9'と入力した場合、 '1999-09-09 00:00'を返します）親の状態（handleCustomInputValueChange）に割り当てられます。 問題は、「数字」タイプをクリックして入力をランダムな文字で入力して保存し、「日時」に移動しても入力が変更されず、リセットされないか、小道具からデータを取得する。それは '数字'からの古い値を持っています。 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} /> 

編集状態データを渡していません。あなたの子供が小道具の変化を聞いてください、このセットに基づいてを状態値

またはあなたの子供がこれにレンダリング変更することができます。

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