一个反应组件中可能有两种状态吗? [英] Is it possible to have two states in one react component

问题描述

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

I'm trying to build a simple unit convertor to practice React.js. I want to be able to change the value of one unit eg: Kg, and have the other unit eg: lb to automatically change on the screen. Please see this website to give you an idea: http://www.convertunits.com/from/lb/to/kg

我有以下代码，它可以渲染，但是单位不会更新.我想知道的是:

I have the following code, it renders but the units don't update. What I want to know is:

• 一个组件具有两个状态 甚至准确吗?1表示 Kg 另一个为 lb
• 还是它们需要成为同级组件?如果是这样，他们将如何更新彼此的状态?
• 如果有可能在同一组件中同时具有两个单元的状态，那么我在这里做错了什么?

• Is it even accurate for one component to have two states? 1 for Kg and another for lb
• Or would they need to be sibling components? If so, how would they go about updating each other's states?
• If it's possible to have the state for both units in the same component, what am I doing wrong here?

谢谢！(我有一个简单的快速应用程序来渲染页面)

Thank you! (I have a simple express app to render the page)

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组件中具有多个状态属性是完全有效的(并且经常是必要的).

Yes, it is perfectly valid (and often necessary) to have more than one state property in a React component.

您的主要问题是，您永远不会将click事件实例传递给处理函数.因此，该函数无法知道数字输入的值.另外，您需要更新功能中两个测量的状态.这是因为您正在将数字输入的值设置为等于该值的状态.当您更改输入中的数字时，除非您同时更新状态，否则它实际上不会更改该输入的呈现方式.最后，正如mattclemens指出的那样，您应该确保正确绑定 this .要么将其绑定到组件实例上(就像我在下面做的那样)，要么在处理函数中使用ES6箭头符号.

Your main problem is that you are never passing your click event instance to the handler function. Therefore, that function has no way of knowing the value of the number input. Also, you need to update the state for both measurements in your function. This is because you are setting the value for your number inputs to equal the state of that value. When you change the number in the input, it will not actually change in the render of that input unless you also update the state. Finally, as mattclemens points out, you should make sure you are binding this correctly. Either bind it on the component instance (like I do below) or use ES6 arrow notation in your handler function.

请牢记所有这些，如果您的班级看起来像这样，将可以正常工作:

With all of that in mind, your class will work if it looks something like this:

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>
    );
  }
}

这篇关于一个反应组件中可能有两种状态吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！