Javascript 响应负载值并允许用户更改组件内的值

我对

React

（16.4.2）是新手，我正在尝试理解它的工作方式。我不想用

redux

使事情复杂化；我只是想知道核心反应库的情况

我有一个应用程序，并且（最终在子链的下游）有一个

input

，它是一个组件，

RangeInput

。它只是一个输入的包装器组件

问题分为两部分

我应该能够更改范围内的值（作为用户）

如果本地存储器中有数据，则应在第一次加载数据。这也意味着用户仍然可以更改输入值

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

需要发生什么

谢谢， 凯利

以下是课程：

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')
);

导出类RangeInput扩展React.Component{
建造师（道具）{
超级（道具）；
this.ds=新数据存储（）；
此.state={
价值：道具价值
};
}
静态getDerivedStateFromProps（props，状态）{
log（'props'，props'，state'，state）；
if（props.value！==state.value）{
返回{value:props.value}；
}
返回null；
}
onChange（事件）{
const target=event.target；
这是我的国家({
value:target.value
});
if（this.props.onChange）{
this.props.onChange（{value:target.value}）；
}
}
onKeyUp（事件）{
如果（event.keyCode！==9）{
返回；
}
const target=event.target；
if（this.props.onChange）{
this.props.onChange（{value:target.value}）；
}
}
render（）{
返回
;
}
}
const DATA_LOAD=‘LOAD’；
导出类应用程序扩展React.Component{
构造函数（）{
超级（）；
此.state={
值：-1，
加载=数据加载
};
}
componentDidMount（）{
if（this.state.load==数据加载）{
this.state.load=DATA\u CLEAN；
const eco=this.ds.getObject（'the-app'）；
如果（生态）{
this.setState（{value:eco}）；
}
}
}
render（）{
返回；
}
}
ReactDOM.render(
,
document.getElementById（'root'））
);

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

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)} />;
  }
}

从“React”导入React；
export const RangeInput=props=>(
)
导出类应用程序扩展React.Component{
建造师（道具）{
超级（道具）；
this.state={value:-1，}；
}
componentDidMount（）{
var val=localStorage.getItem（'myVal'）；
if（val）this.setState（{value:val}）
}
设定值（e）{
this.setState（{value:e.target.value}）
setItem（'myVal'，e.target.value）；
}
render（）{
返回；
}
}

这里我们有两个组件：

，一个是无状态组件，另一个是操作背后的大脑

---

跟踪状态，并将回调函数传递给RangeInput。然后，在keydown上，

将事件对象传递给该回调函数。然后，应用程序使用事件对象更新状态和

localStorage

。刷新时，上次保存的值将从

localStorage

中提取，并显示在输入中（如果可用）。

许多代码似乎丢失，您可以完成或制作一个沙盒吗？在该范围内是什么意思？作为道具传递给RangeInput的值是什么？为什么？还有一件事永远不会在渲染中直接绑定，而是在构造函数中绑定。显然，有更多的属性被发送到这个组件，

RangeInput

，但其核心是设置和

值

是问题所在。唯一要添加的是，使用

应用程序

可以保存到本地存储，但只有在实际单击

提交

时，这意味着没有“智能保存”功能！我有一种感觉，有些东西不适合我。简单地说，当你描述

应用程序

是这一切的大脑时（这正是我想要的），它对我来说是有意义的；意思是我让它做了一部分，而你让它做了它的全部荣耀。我试图让组件管理自己的psuedo简单状态。事实上，这就是问题所在。应用程序应该一直在管理它（如您所示）。再次感谢您抽出时间向我展示流程，它给了我巨大的帮助！找到充分的荣耀确实很棘手——我很高兴这有帮助！