javascript - MOBX デフォルト、他の状態から派生した編集可能な状態

Question

ユーザーが自分の個人情報 (名前、名前、メールアドレス) を追加し、製品、金額、色、理由を入力する必要があるフォームがあるとします。

class Store {
    constructor(){
        extendObservable(this, {
             name : '', 
             firstName : '', 
             mail: '', 
             product : '', 
             amount: 0, 
             color: '', 
             reason : '',
             // computed functions & actions... 
        })
    }
}

反応コンポーネント (理由):

const Reason = observer(class Reason extends Component {
    onChange = (e) => {
        this.props.store.setReason(e.target.value);
    };  

    render () {
        const reason = this.props.store.reason;

        return (
             <textarea
                id="reason"
                name="reason"
                className="form-control"
                required={true}
                onChange={this.onChange}
                rows="2"
                value={reason}
             />
        );
    }
});

のようなデフォルトの理由を追加したい場合はHi ${firstName}, you asked for ${amount} X ${color} ${product}、どうすればよいですか。ユーザーが理由を上書きできる必要があるため、これには計算関数を使用できません。もちろん、ユーザーがデフォルト文字列に表示されるフィールドの 1 つを更新するたびに、デフォルト文字列を更新する必要があります。

前もって感謝します