I use a simple input field which should be controlled by an @observable value:

<div>
    <input value={this.props.appState.myValue} onChange={this.handleChange}/>
    value: {this.props.appState.myValue}
</div>

After updating myValue to undefined the displayed value changes, but the value in the input field keeps the same value.

Initial state:

[initial]
value: initial

After update:

[initial]
value:

I use a simple input field which should be controlled by an @observable value:

<div>
    <input value={this.props.appState.myValue} onChange={this.handleChange}/>
    value: {this.props.appState.myValue}
</div>

After updating myValue to undefined the displayed value changes, but the value in the input field keeps the same value.

Initial state:

[initial]
value: initial

After update:

[initial]
value:

• javascript
• reactjs
• mobx

Share Improve this question Follow edited Dec 27, 2016 at 15:25 Tholle 113k2222 gold badges208208 silver badges197197 bronze badges asked Dec 27, 2016 at 14:58 Matthias MMatthias M 15k1818 gold badges9898 silver badges129129 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

I would suspect you are not making your ponent into an observer. Try this example:

@observer
class App extends React.Component {
  handleChange = (e) => {
    this.props.appState.myValue = e.target.value; 
  };
  render() {
    const { appState } = this.props;
    return (
      <div>
        <input value={appState.myValue} onChange={this.handleChange} />
        value: {appState.myValue}
      </div>
    );
  }
}