Реагировать на значение нагрузки и позволить пользователю изменять значение в компоненте

Я новичок в React (16.4.2) и пытаюсь понять, как это работает. Я не хочу усложнять ситуацию с redux; Я просто хочу узнать об основной библиотеке реакции.

У меня есть приложение, и (в конечном итоге в дочерней цепочке) есть input, который является компонентом RangeInput. Это просто компонент-оболочка для ввода.

Проблема состоит из двух частей

1. Я должен иметь возможность изменить значение в пределах диапазона (как пользователь)
2. если в локальном хранилище есть данные, он должен загрузить их в первый раз. Это также означает, что пользователь по-прежнему должен иметь возможность изменять / изменять входное значение.

Прямо сейчас я вижу, что могу делать только одно из другого. Я знаю, что что-то здесь не понимаю.

Что должно произойти?

Спасибо, Келли

Вот классы:

export class RangeInput extends React.Component {
    constructor(props) {
       super(props);
       this.ds = new DataStore();
       this.state = {
          value: props.value
       };
    }

    static getDerivedStateFromProps(props, state) {
        console.info('props', props, 'state', state);
        if (props.value !== state.value) {
          return {value: props.value};
        }

        return null;
    }

    onChange(event) {
      const target = event.target;

      this.setState({
        value: target.value
      });

      if (this.props.onChange) {
        this.props.onChange({value: target.value});
      }
   }

   onKeyUp(event) {
      if (event.keyCode !== 9) {
        return;
      }

      const target = event.target;

      if (this.props.onChange) {
        this.props.onChange({value: target.value});
      }
  }

  render() {
       return <div>
           <input type = "number" value = {this.state.value}
           onChange = {this.onChange.bind(this)}
           onKeyUp = {this.onKeyUp.bind(this)}/>
       </div>;
    }
}

const DATA_LOAD = 'load';
export class Application extends React.Component {
    constructor() {
       super();

       this.state = {
          value: -1,
          load = DATA_LOAD
       };
    }

    componentDidMount() {
      if (this.state.load === DATA_LOAD) {
         this.state.load = DATA_CLEAN;
         const eco = this.ds.getObject('the-app');
         if (eco) {
            this.setState({value: eco});
         }
       }
    }

    render(){
       return <RangeInput value = {this.state.value} />;
    }
}


ReactDOM.render(
  <Application/>,
  document.getElementById('root')
);