React.js 复选框将状态中的属性更改为“打开”

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

我在输入应该是数字时遇到了类似的问题，但似乎 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} />
    }
}