0

我有一个这样的 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 时，反之亦然，用户输入的文本将丢失或复选框将丢失其复选标记。

我想知道当用户来回切换选项卡时，如何使文本框或复选框保留其用户输入的值。

4

1 回答 1

2

由于 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-20T19:54:23.303 回答