如何解决字符串变量不呈现
我有一个我想要反应的变量。例子很简单:用户输入电子邮件的输入,值在页面上反应性地呈现。但它没有发生:( 变量的值已更改,但未呈现。codesandbox 上的示例。谢谢!
解决方法
从 MobX 6 开始,尽管有装饰器,你还是需要使用 makeObservable。完整示例:
UserProfileStore:
import { action,makeObservable,observable } from "mobx"
class UserProfileStore
{
@observable email = 'initial@email.com'
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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。