使用 bootstrapswitcher 时不会触发 React onChange

Question

我想使用引导开关来 React。我正在初始化组件并传递道具。但是当我通过单击更改按钮的状态时，更改功能不会触发。该按钮似乎工作正常，但有些东西覆盖了输入字段的 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

您已经binded 函数。使用那个而不是创建另一个。

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

应该是：

<input onChange={this.onChangeHandler}

鉴于onChange 是处理事件更改的正确道具。

Answer 2

import React, { Component } from 'react'

class App1 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')
                    if (this.state.checked === true) {
                alert('A')
            } else {
                alert('B')
            }
        this.setState({
                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 App1

看到这个