ReactJS 구성 요소는 내가 이런 ReactJS 구성 요소가 사용자

Question

가 입력 한 입력 값을 잃는다 본문. tab2이 선택되면 구성 요소는 사용자가 확인할 수있는 확인란을 반환합니다.

내 문제는 사용자가 탭 1에서 탭 2로 또는 그 반대로 탭을 전환 할 때마다 사용자가 입력 한 텍스트가 손실되거나 확인란의 선택 표시가 사라진다는 것입니다.

사용자가 탭을 앞뒤로 전환 할 때 텍스트 상자 또는 확인란이 사용자가 입력 한 값을 보존 할 수있는 방법이 궁금합니다.

Answer 1

반응시 렌더링시 입력 돔이 삭제되고 그 반대의 경우도 마찬가지입니다. 상태에 값을 저장하고 입력 또는 체크 상자를 렌더링 할 때 값을 사용해야합니다. 아래 코드는 암시 적입니다. 좀 더 조정할 필요가 있습니다.

@observer class InputForm extends React.Component{ 
    super() { 
     this.state = {value : '', checked : false}; 
    } 

    onChangeInput (e) { this.setState({value : e.target.value});} 
    onChangeCheckbox (e) {this.setState({checked : e.target.checked});} 
    render(){ 
     if(this.props.store.tab1.isSelected){ 
      return <form><input onChange=this.onChangeInput.bind(this) type="text" value={this.state.value}/></form> 
     }else if(this.props.store.tab2.isSelected){ 
      return <form><input onChange=this.onChangeChecbox.bind(this) type="checkbox" checked={this.state.checked}/></form> 
     } 
    } 
}