反应.js复选框将状态中的属性更改为'on'

Question

我可以使用一些帮助了解这里发生的事情。我正在学习反应，并试图重新创建我在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});  
  }

我对应该是数字的输入也有类似的问题，但是React中的<input>似乎总是返回一些字符串，我不确定如何将其胁到类型（布尔值，整数等）我想要。

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