是否有可能在一個反應​​組件中有兩個狀態

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