我正在尝试构建一个简单的单位转换器来练习 React.js。我希望能够更改一个单位的值,例如:公斤,并让另一个单位例如:磅在屏幕上自动更改。请查看这个网站给您一个想法:http://www.convertunits.com/from/lb/to/kg http://www.convertunits.com/from/lb/to/kg
我有以下代码,它会呈现,但单位不会更新。我想知道的是:
- 一个组件是否准确
two states
? 1 for Kg
另一个用于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>
);
}
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)