Question

我似乎无法使用Bootstrap 4.3使该开关正常工作。我认为使用bootstrap className会遇到问题，因为如果不这样做，情况会有所不同并且可以正常工作。

我尝试像在html中一样设置带有ID的标签，并将其标记到标签上，但是它似乎也不起作用。

class Privacidad extends Component {
    state = {
        isChecked: true
    }
    toggleChange = () => {
        this.setState({
            isChecked: !this.state.isChecked,
        });
    }

     <label>
       <input type="checkbox" className="custom-control-input"
                              checked={this.state.isChecked}
                              onChange={this.toggleChange}
                                />
         Si, deseo que otros usuarios me contacten
      </label>

    </div>

Answer 1

它是否起作用取决于“ custom-control-input”类？因为如果是这样，则可能由于您使用“ class”属性而不是“ className”属性而无法正常工作。由于class是保留字，React要求您使用className。

Answer 2

React使用<system.webServer> <httpProtocol> <customHeaders> <add name="Access-Control-Allow-Origin" value="*" /> <add name="Access-Control-Allow-Headers" value="Content-Type" /> <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" /> </customHeaders> </httpProtocol> </system.webServer>而不是className为标签分配类。

class

Answer 3

为input使用checkbox时，必须使用此

<input type="checkbox" 
    className="custom-control-input"
    value={this.state.isChecked} //instead of checked attribute use value attribute
    onChange={this.toggleChange}
 />

Demo

使用Bootstrap ClassName反应开关

3 个答案: