ReactJS組件失去由用戶

輸入我有一個ReactJS部件這樣的輸入值：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，反之亦然，用戶輸入的文本將會丟失，或者複選框將會丟失複選標記。

我不知道如何讓文本框或複選框在用戶切換標籤時保留其用戶輸入的值。

來源

2017-02-20 user3405291

每個'if'下的'form'組件都被卸載，所以它們失去了狀態。存儲輸入的值並在新組件裝入時再次更新它們。 –

@TylerSebastian謝謝。我想知道你是否可以用示例代碼來演示。 – user3405291

我無法使用React + Redux重現上述問題 - 您正在使用mobx。我簡單地看了一下文檔（我之前沒有和mobx一起工作過），並且我認爲在if語句塊之外移動'

由於react會在渲染複選框時刪除輸入的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> 
     } 
    } 
}

來源

2017-02-20 19:54:23

ReactJS組件失去由用戶

回答

相關問題