我正在尝试构建一个简单的单位转换器来练习 React.js。我希望能够更改一个单位的值，例如：Kg，并让另一个单位（例如：lb）在屏幕上自动更改。请看这个网站给你一个想法：http : //www.convertunits.com/from/lb/to/kg

我有以下代码，它呈现但单位不更新。我想知道的是：

• 一个组件是否准确two states？1 为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() {});