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

Question

我试图构建一个简单的单位转换器来练习React.js。我希望能够更改一个单位的值，例如：公斤，并让其他单位例如：lb在屏幕上自动更改。请看这个网站给你一个想法：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() {}); 

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