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

由于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>
        }
    }
}

ReactJS组件丢失用户输入的输入值

1 个答案: