Javascript 在一个反应组分中可能有两种状态吗
我正在尝试构建一个简单的单元转换器来练习React.js。我想能够改变一个单位的值,例如:公斤,并有另一个单位,例如:磅自动改变屏幕上。请访问本网站,了解以下信息: 我有下面的代码,它呈现,但单位不更新。我想知道的是:Javascript 在一个反应组分中可能有两种状态吗,javascript,reactjs,components,state,Javascript,Reactjs,Components,State,我正在尝试构建一个简单的单元转换器来练习React.js。我想能够改变一个单位的值,例如:公斤,并有另一个单位,例如:磅自动改变屏幕上。请访问本网站,了解以下信息: 我有下面的代码,它呈现,但单位不更新。我想知道的是: 一个组件具有两种状态是否准确?1公斤Kg 另一个用于lb 或者它们是否需要成为同级组件?如果是这样,他们将如何更新彼此的状态 如果可能在同一个组件中有两个单元的状态,我在这里做错了什么 谢谢大家!! (我有一个简单的express应用程序来呈现页面) 是的,在一个React组
- 一个组件具有两种状态是否准确?1公斤Kg
另一个用于
lb
- 或者它们是否需要成为同级组件?如果是这样,他们将如何更新彼此的
状态
- 如果可能在同一个组件中有两个单元的状态,我在这里做错了什么
是的,在一个React组件中有多个状态属性是完全有效的(并且经常是必要的) 您的主要问题是,您从未将click事件实例传递给处理程序函数。因此,该函数无法知道数字输入的值。此外,还需要在函数中更新两个测量的状态。这是因为您正在将数字输入的值设置为等于该值的状态。更改输入中的数字时,除非同时更新状态,否则该数字在该输入的渲染中实际上不会更改。最后,正如mattclemens所指出的,您应该确保正确绑定
这个。要么在组件实例上绑定它(就像下面我所做的),要么在处理程序函数中使用ES6箭头符号
考虑到所有这些,如果您的类看起来像这样,那么它将工作:
class Range extends React.Component {
constructor(props) {
super(props);
this.state = { kg: 0, lb: 0 };
}
kgClick(e) {
var newLb = e.target.value * 2.2046;
this.setState({ kg: e.target.value, lb: newLb });
}
lbClick(e) {
var newKg = e.target.value / 2.2046;
this.setState({ lb: e.target.value, kg: newKg });
}
render() {
return (
<div>
<label> Kg: </label>
<input type="number" name="Kg" onChange={this.kgClick.bind(this)} value={this.state.kg} />
<label> Lb: </label>
<input type="number" name="Lb" onChange={this.lbClick.bind(this)} value={this.state.lb} />
</div>
);
}
}
类范围扩展了React.Component{
建造师(道具){
超级(道具);
this.state={kg:0,lb:0};
}
KG(e){
var newLb=e.target.value*2.2046;
this.setState({kg:e.target.value,lb:newLb});
}
lbClick(e){
var newKg=e.target.value/2.2046;
this.setState({lb:e.target.value,kg:newKg});
}
render(){
返回(
公斤:
磅:
);
}
}
快速查看您的代码,确保事件处理程序(lbCLick
,kgClick
)获得正确的this
。使用ES6类的React组件不再自动绑定此
到非React方法涵盖了您面临的一些潜在问题,请阅读这篇伟大的文章!谢谢你的回复。我读了这篇文章,修改了我的代码,但仍然不起作用。我尝试了构造函数(props){super(props);this.state={kg:0,lb:0};this.kgClick=this.kgClick.bind(this);this.lbClick=this.lbClick.bind(this);}
和ES6 arrow函数表示法,但这两种方法都不起作用。我是傻瓜。我刚刚意识到到底出了什么问题。我会更新我的答案给你看。好的,我更新了我的答案。我希望这一切都有意义。如果你需要更多的澄清,请告诉我。我刚刚试过那门课,它对我很有效。非常感谢你抽出时间来帮助我。这真的很奇怪,我尝试了你粘贴的代码,但它不起作用。你是在后台使用express代码还是其他什么?好的,我将我的环境更改为从客户端渲染,它可以工作!谢谢你的帮助,你是个传奇人物。我学到了很多。
var express = require('express');
var app = express();
app.set('port', (9000));
app.set('view engine', 'jsx');
app.set('views', __dirname + '/views');
app.engine('jsx', require('express-react-views').createEngine({ transformViews: false }));
require('babel/register')({
ignore: false
});
app.use('/', function(req, res) {
res.render('index', "");
});
app.listen(app.get('port'), function() {});
class Range extends React.Component {
constructor(props) {
super(props);
this.state = { kg: 0, lb: 0 };
}
kgClick(e) {
var newLb = e.target.value * 2.2046;
this.setState({ kg: e.target.value, lb: newLb });
}
lbClick(e) {
var newKg = e.target.value / 2.2046;
this.setState({ lb: e.target.value, kg: newKg });
}
render() {
return (
<div>
<label> Kg: </label>
<input type="number" name="Kg" onChange={this.kgClick.bind(this)} value={this.state.kg} />
<label> Lb: </label>
<input type="number" name="Lb" onChange={this.lbClick.bind(this)} value={this.state.lb} />
</div>
);
}
}