字符串变量不呈现

问题描述

我有一个我想要反应的变量。例子很简单：用户输入电子邮件的输入，值在页面上反应性地呈现。但它没有发生:( 变量的值已更改，但未呈现。codesandbox 上的示例。谢谢！

解决方法

从 MobX 6 开始，尽管有装饰器，你还是需要使用 makeObservable。完整示例：

UserProfileStore：

import { action,makeObservable,observable } from "mobx"

class UserProfileStore
{
    @observable email = '[e-mail]'

    constructor()
    {
        makeObservable( this ) // REQUIRED
        console.log( 'Store :: constructor initialized' )
    }

    get getEmail()
    {
        console.log( 'Store :: email requested' )
        return this.email
    }

    @action saveEmail( value )
    {
        this.email = value
        console.log( 'Store :: email saved: ' + value )
    }
}

export default UserProfileStore

用户配置文件表单：

import React,{ Component } from "react"
import { Col,FormGroup,Input,Label } from "reactstrap"
import { observer } from "mobx-react"
import UserProfileStore from "./UserProfileStore";

@observer
class UserProfileForm extends Component
{
    /**
     * @type {UserProfileStore}
     */
    store = null;

    constructor( props )
    {
        super( props );

        this.store = new UserProfileStore()
        this.saveEmail = this.saveEmail.bind( this )

        console.log( 'Form :: constructor initialized' )
    };

    saveEmail( { target: { value } } )
    {
        console.log( 'Form :: saving email value: ' + value )
        this.store.saveEmail( value )
    }

    render()
    {
        return (
            <div>
                <FormGroup row>
                    <Label htmlFor="email" md={2}>Email</Label>
                    <Col md={10}>
                        <Input type="text" id="email" name="email" placeholder="Email" onChange={this.saveEmail}/>
                    </Col>
                </FormGroup>
                <div>New email: {this.store.getEmail}</div>
            </div>
        );
    }
}

export default UserProfileForm