[英]React load value and allow user to alter value within component
I'm new to React
(16.4.2), and I'm trying to understand the way it works. 我是
React
(16.4.2)的新手,我试图了解它的工作方式。 I don't want to complicate things with redux
; 我不想使
redux
复杂化; I just want to know about the core react library. 我只想了解核心反应库。
I have an application, and (eventually down the children chain) there is an input
, which is a component, RangeInput
. 我有一个应用程序,(最终在子链中)有一个
input
,它是一个组件RangeInput
。 It's just a wrapper component for an input. 它只是输入的包装器组件。
The problem is two parts 问题是两个部分
Right now with this, I see to only be able to do one of the other. 现在,我只能做到其中之一。 I know I'm not understanding something here.
我知道我对这里的内容不了解。
What needs to happen? 需要发生什么?
Thanks, Kelly 谢谢,凯利
Here are the classes: 这些是类:
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')
);
I think this situation can be simplified quite a bit: 我认为这种情况可以简化很多:
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)} />;
}
}
Here we have two components: <RangeInput>
, a stateless component, and <Application>
, the brains behind the operation. 在这里,我们有两个组件:
<RangeInput>
(无状态组件)和<Application>
(操作背后的大脑)。
<Application>
keeps track of the state, and passes a callback function to RangeInput. <Application>
跟踪状态,并将回调函数传递给RangeInput。 Then, on keydown, <RangeInput>
passes the event object to that callback function. 然后,在
<RangeInput>
, <RangeInput>
将事件对象传递给该回调函数。 Application then uses the event object to update the state and the localStorage
. 然后,应用程序使用事件对象来更新状态和
localStorage
。 On refresh, the last saved value is fetched from localStorage
and present in the input (if available). 刷新时,将从
localStorage
获取最后保存的值,并将其显示在输入中(如果可用)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.