是否可能在一个反应​​组件中有两个状态

Question

我正在尝试构建一个简单的单位转换器来练习React.js.我希望能够更改一个单位的值,例如:Kg,并让另一个单位例如:lb在屏幕上自动更改.请访问此网站,向您提供一个想法:http://www.convertunits.com/from/lb/to/kg

我有以下代码,它呈现但单位不更新.我想知道的是:

• 一个组件的准确度是否准确two states？1 for for Kg and another forlb
• 或者他们需要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() {});

Answer 1

是的，在 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>
    );
  }
}