react-switch-button 不能由 setState 更新

Question

我是 React 的新手，最近开始学习和玩一些第三方组件。一种尝试是 (http://gfazioli.github.io/react-switch-button/#demo)

因此，很快就会遇到一个愚蠢的问题（可能只是我无法弄清楚如何）。在下面的示例中，我无法将 SwitchButton 的 false 状态更新为 true。假设我尝试使用按钮单击来触发 SwitchButton 上的更新，但我不能让它工作。

'checked' 属性是 String 类型，尝试过 ('true'|'false'|'checked'|'') 甚至让 bk 使用 Boolean 但仍然没有运气，也看不到它的任何其他属性可能会触发 SwitchButton 上的更新

如果有人可以帮助新手，不胜感激。非常感谢

import React from 'react'
import SwitchButton from 'react-switch-button'
import 'react-switch-button/dist/react-switch-button.css'

export default class Demo extends React.Component {
  constructor() {
    super();
    this.state = {
      testChecked: 'false'
    };

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

  componentDidMount() {
    console.log(this.state.testChecked)
  }

  onButtonClick(){
    this.setState({
      testChecked: 'true'
    });
    console.log(this.state.testChecked);
  }

  render() {
    return(
        <div>
          react-switch-button
          <br/><br/>
          <input type='button' value='click' onClick={this.onButtonClick} />
          <br/>
          {this.state.testChecked}:
          <SwitchButton name='switch-1' defaultChecked={false} checked={this.state.testChecked} />
        </div>
    );
  }
}

Answer 1

据我在源代码中看到的https://github.com/gfazioli/react-switch-button/blob/master/src/react-switch-button.js，似乎没有使用属性checked

考虑到这一点，您想使用 defaultChecked 属性来切换状态，例如

<SwitchButton name='switch-1' defaultChecked={this.state.testChecked} />

它来自 React.PropTypes.bool 类型，而不是 React.PropTypes.string，您已将状态 testChecked 更改为该类型。