Question

我想使用bootstrapswitch来进行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

您已经bind编辑了该功能。使用那个而不是创建另一个。

<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

看到这个

使用bootstrapswitcher时不会触发React onChange

2 个答案: