Question

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

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

'checked'属性是字符串类型，尝试过（'true'|'false'|''''''''或者甚至让bk使用布尔但仍然没有运气，也看不到它的任何其他属性可以在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

我认为属性checked没有被使用，因为我在源代码中可以看到它https://github.com/gfazioli/react-switch-button/blob/master/src/react-switch-button.js

考虑到这一点，你想使用defaultChecked道具来切换状态，例如

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

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

react-state无法更新react-switch-button

1 个答案: