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} /> 
    } 
}