Question

我可以帮助了解这里发生了什么。我正在学习React，并尝试重新构建我在Ember现有应用程序中构建的组件。

相当简单的情况，只是让一个组件具有自己的状态，并且该组件包含一个复选框，用于在状态上切换属性starChart。问题是虽然复选框从状态获取正确的值，但当我切换它时，它会保持检查状态并将state属性更改为字符串“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} />
    }
}

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

1 个答案: