反应加载值并允许用户更改组件内的值

Question

我是 React (16.4.2) 的新手，我正在尝试了解它的工作方式。我不想让 redux 复杂化；我只想了解核心反应库。

我有一个应用程序，并且（最终在子链下）有一个 input，它是一个组件 RangeInput。它只是输入的包装器组件。

问题有两部分

我应该能够在范围内更改值（作为用户）
如果本地存储中有数据，应该第一时间加载。这也意味着用户应该仍然能够 alter/change 输入值。

现在有了这个，我看到只能做其中之一。我知道我在这里不明白。

需要做什么？

谢谢，凯利

这里是类:

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

    static getDerivedStateFromProps(props, state) {
        console.log('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')
);

Answer 1

我认为这种情况可以简化很多：

import React from 'react';

export const RangeInput = props => (
  <input
    value={props.value}
    onChange={props.setValue} />
)

export class Application extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: -1, };
  }

  componentDidMount() {
    var val = localStorage.getItem('myVal');
    if (val) this.setState({value: val})
  }

  setValue(e) {
    this.setState({value: e.target.value})
    localStorage.setItem('myVal', e.target.value);
  }

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

这里我们有两个组件：<RangeInput>，一个无状态组件，和 <Application>，操作背后的大脑。

<Application> 跟踪状态，并将回调函数传递给 RangeInput。然后，在按下键时，<RangeInput> 将事件对象传递给该回调函数。然后应用程序使用事件对象更新状态和 localStorage。刷新时，最后保存的值从 localStorage 中获取并出现在输入中（如果可用）。

反应加载值并允许用户更改组件内的值

React load value and allow user to alter value within component

javascript

reactjs

ecmascript-2017