javascript - 使用 bootstrapswitcher 时，React onChange 不会触发

Question

我想使用 bootstrapswitch 来 React。我正在初始化组件并传递 Prop 。但是，当我通过单击按钮更改按钮的状态时，更改功能不会触发。该按钮似乎工作正常，但有些东西覆盖了输入字段的 onChange 函数。

如何确定 onChange 函数的优先级？或者有更好的解决方案吗？

import React, { Component } from 'react'

class ReactBootstrapSwitch extends Component {
    constructor(props) {
        super(props)
        this.state = {
            isChecked: false
        }
        this.onChangeHandler = this.onChangeHandler.bind(this)
    }

    componentWillMount() {
        this.setState({
            checkBoxText: this.props.checkBoxText,
            isChecked: this.props.isChecked
        })
    }

    componentDidMount() {
        window.$(`[name=${this.props.id}]`).bootstrapSwitch();
    }

    onChangeHandler(event) {
        alert('Hi')
        this.setState(function (previousState, props) {
            if (previousState.checked === true) {
                alert('A')
            } else {
                alert('B')
            }
            return {
                isChecked: !this.state.isChecked
            }
        }
        )
    }

    render() {
        return (
            <div className="form-check form-check-switch form-check-switch-left" >
                <label className="form-check-label" >
                    <input onChange={event => this.onChangeHandler(event)}
                        name={this.props.id}
                        type="checkbox"
                        className="form-check-input form-check-input-switch"
                        data-off-color="warning"
                        data-on-text="On"
                        data-off-text="Off"
                        checked={this.state.isChecked}>
                    </input>
                    <b>{this.state.checkBoxText}</b>
                </label>
            </div>
        )
    }
}

export default ReactBootstrapSwitch

Answer 1

您已经绑定(bind)该函数。使用那个而不是创建另一个。

<input onChange={event => this.onChangeHandler(event)}

应该是:

<input onChange={this.onChangeHandler}

给定的 onChange 是处理事件更改的正确属性。