React - 구성 요소 입력 재설정

Question

구성 요소에 어려움을 겪고 있으며 여러분이 도와 주길 바랍니다. 그래서 사용자가 입력 한 값의 형식이 지정된 값을 반환하는 사용자 지정 구성 요소를 만들었습니다 (사용자가 '1999-9-9'를 입력하면 '1999-09-09 00:00'을 반환 함). 부모 (handleCustomInputValueChange)의 상태에 할당됩니다. 지금 문제는 '숫자'유형을 클릭하고 입력을 임의의 문자로 채우고 저장 한 다음 'datetime'으로 이동하면 입력이 변경되지 않고 재설정되지 않거나 ' 소품에서 데이터를 가져 오지 마라. 그것은 '숫자'에서 오래된 값을가집니다. 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} />; 
    } 
} 

.. 따라서 다른 형태로 전환 한 후, 입력을 초기화 할 수있는 방법이 있는가?

감사합니다. 아이에 data을 통과, 당신이해야 할 동안

Answer 1

당신은 제대로 아이에게

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

편집 상태 데이터를 전달되지 않습니다 귀하의 자녀가이 세트에 따라, 소품의 변화 수신 확인 상태 치

또는 자녀가이에 렌더링 변경할 수는 :

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