React.js複選框將狀態更改爲'on'

Question

我可以使用一些幫助來理解這裏發生了什麼。我正在學習React，並嘗試重新創建我在Ember中的現有應用程序中構建的組件。

相當簡單的情況，只是有一個組件具有自己的狀態，並且此組件包含一個用於在狀態上切換屬性starChart的複選框。問題是，雖然複選框從狀態獲得正確的值，但當我切換它時，它會保持檢查狀態並將狀態屬性更改爲字符串「on」而不是布爾值。

這裏是複選框;我也跟着在創建onChange調用和處理函數另一個教程，所以也許這裏有什麼不對，我只是不知道如何分辨它是什麼：

<input name="starChart" 
     type="checkbox" 
     checked={data.starChart} 
     onChange={(e) => this.handleChange(e)}/> 

處理函數

handleChange = (e) => { 
    const rec = { 
     ...this.state.dci, 
     [e.target.name]: e.target.value 
    }; 
    this.setState({dci: rec}); 
    } 

我有一個類似的問題，應該是數字的輸入，但它似乎是一個<input>在React總是返回一些字符串，我不知道如何強制它的類型（布爾，整數等），我想。

Answer 1

在您的狀態下，您可以存儲輸入的狀態。一旦發生更改事件，您可以切換狀態的值。

下面是一個例子代碼：

class Input extends React.Component { 
    constructor(props) { 
     super(props); 

     this.state = { 
      // Default value of the input 
      checked: false 
     } 

     this.toggleChange = this.toggleChange.bind(this); 
    } 

    toggleChange() { 
     this.setState({ 
      checked: ! this.state.checked 
     }); 
    } 

    render() { 
     <input checked = {this.state.checked} onChange = {this.toggleChange} /> 
    } 
}