是否有可能在一个反应组件中有两个状态
我试图构建一个简单的单位转换器来练习React.js。我希望能够更改一个单位的值,例如:公斤,并让其他单位例如:lb在屏幕上自动更改。请看这个网站给你一个想法:http://www.convertunits.com/from/lb/to/kg是否有可能在一个反应组件中有两个状态
我有以下代码,它呈现,但单位不更新。我想知道的是:
- 对于一个零件有
two states
甚至准确吗? 1 forKg
另一个用于lb
- 或者他们需要是
sibling components
?如果是这样,他们将如何去更新对方的states
? - 如果可能在同一个组件中拥有两个单元的状态,那么我在这里做错了什么?
谢谢! (我有一个简单明确的应用程序来渲染页面)
import React from 'react';
export default class Converter extends React.Component {
render() {
return (
<div className="convert">
<Range />
</div>
);
}
}
class Range extends React.Component {
constructor(props) {
super(props);
this.state = { kg: null, lb: null };
}
kgClick() {
this.setState({ lb: state.kg * 2.2046 });
}
lbClick() {
this.setState({ kg: state.lb/2.2046 });
}
render() {
return (
<div>
<label> Kg: </label>
<input type="number" name="Kg" onChange={this.kgClick} value={this.state.kg} />
<label> Lb: </label>
<input type="number" name="Lb" onChange={this.lbClick} value={this.state.lb} />
</div>
);
}
}
后端逻辑:
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() {});
是的,这是完全合法的(通常需要)有在多个国家的财产React组件。
您的主要问题是您从未将您的点击事件实例传递给处理函数。因此,该函数无法知道数字输入的值。此外,您需要更新函数中两种测量的状态。这是因为您将数字输入的值设置为等于该值的状态。当您更改输入中的数字时,除非您还更新了状态,否则该输入中的数字不会真正改变。最后,正如mattclemens指出的那样,你应该确保你正确地绑定了this
。将它绑定到组件实例上(如下所示)或在处理函数中使用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>
);
}
}
感谢您的回复。我阅读了文章,并修改了我的代码,但它仍然无法工作。我已经试过'构造(道具){超级(道具); \t \t this.state = {kg:0,lb:0}; \t \t this.kgClick = this.kgClick.bind(this); \t \t this.lbClick = this.lbClick.bind(this); \t \t }'和ES6箭头功能符号,但都没有方法的工作。 – Anita
我是笨蛋。我刚刚意识到发生了什么问题。我会更新我的答案给你看。 –
好吧,我更新了我的答案。我希望这一切都有道理。让我知道你是否需要更多的澄清。我刚试过那个确实的课,它对我很有帮助。 –
快看你的代码,请确保您的事件处理程序,('lbCLick','kgClick')是得到正确的'这个'。使用ES6类的React组件不再将'this'自动绑定到非React方法[本博文](http://babeljs.io/blog/2015/06/07/react-on-es6-plus/)涵盖了一些潜在的问题你面临 – enjoylife
感谢您的伟大的文章! – Anita