1

私がそれをすべきではない唯一の理由は、反応してビューを更新することです。https://facebook.github.io/react/docs/state-and-lifecycle.html#using-state-correctly
しかし、MobX-react は私のためにこれらの汚い仕事をしているようです。this.state観察可能としてマークするだけで、すべてが期待どおりに機能します。欠点はありますか?すべての州を巨大な店に放り込みたくはありません。

JSFミドルリンク

コード:

const {observable, computed} = mobx;
const {observer} = mobxReact;
const {Component} = React;

@observer
class Form extends React.Component{
    @observable state = {
        username: '',
        password: '',
    };

    constructor(...args) {
        super(...args);
        this.handleSubmit = this.handleSubmit.bind(this)
    }

    render() {
        return  <form onSubmit={this.handleSubmit}>
                    <label>
                    Name:
                    <input type="text" value={this.state.username} onChange={event => this.state.username = event.target.value} />
                    </label>
                    <div>username: {this.state.username}</div>
                    <input type="submit" value="Submit" />
                </form>;
    }

    handleSubmit(event: Event) {
        event.preventDefault();
        console.log(this.state.username);
    }
}

ReactDOM.render(
    <div>
        <Form />
        <mobxDevtools.default />
    </div>
, document.getElementById('mount'));
4

2 に答える 2