ReactJS компонент теряет входные значения, введенные пользователем

Question

У меня есть компонент ReactJS вроде этого:

import React from 'react' 
import {observer} from 'mobx-react' 

@observer class InputForm extends React.Component{ 
    render(){ 
     if(this.props.store.tab1.isSelected){ 
      return <form><input type="text"/></form> 
     }else if(this.props.store.tab2.isSelected){ 
      return <form><input type="checkbox"/></form> 
     } 
    } 
} 

путь этот компонент работает: когда tab1 выбран компонент возвращает текстовое окно, в котором пользователь может ввести текст. Если выбрано tab2, компонент возвращает флажок, который пользователь может проверить.

Моя проблема в том, что всякий раз, когда пользователь переключает вкладки с tab1 на tab2 и наоборот, текст, который пользователь ввел, будет потерян или флажок потеряет свою галочку.

Интересно, как я могу заставить текстовое поле или флажок сохранить введенные пользователем значения, когда пользователь переключает вкладки назад и вперед.

Answer 1

Поскольку реакция удалит флажок ввода dom при рендеринге и наоборот. Вам нужно будет хранить значения в состоянии и использовать их при рендеринге ввода или флажке. Обратите внимание, что ниже код наводит на размышления. Возможно, потребуется немного настроить.

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