Bootstrap複選框不切換

我正在使用Bootstrap複選框和常規的複選框。爲什麼Bootstrap Checkbox無法切換，而常規的input字段成功切換？Bootstrap複選框不切換

onChange = (evt) => { 
    const target = evt.target; 
    const name = target.name; 
    const value = target.type === 'checkbox' ? target.checked : target.value; 
    this.setState({ 
     [name]: value 
    }); 

    this.props.onChange({ name, value }); 
}; 
        <input 
         name="unlimited" 
         type="checkbox" 
         checked={this.state.unlimited} 
         onChange={this.onChange} /> 
        <Checkbox 
         name="unlimited" 
         onChange={this.onChange} 
         checked={this.state.unlimited} 
        > 
         UNLIMITED {this.state.unlimited.toString()} 
        </Checkbox>

編輯我做了一堆錯誤，當我最初發布代碼。以上是已更正的代碼。

編輯我確信這是一個錯誤，因爲Bootstrap JS庫干擾，see here。

來源

2017-10-17 Avremel Kaminetzky

這可能是因爲他們在幕後做了一些有趣的事情。您的onChange處理程序正在期待一個本機複選框事件。看着他們的文檔，他們回報價值而不是事件。你將不得不寫一個稍微不同的onChange處理程序。 –

我console.logged所有和本機事件工作得很好，提供了正確的值，當'type == checkbox'。「checked」值在true和false之間正確切換。 –

你爲什麼要更新狀態然後調用'this.props.onChange'？你應該做一個或另一個。 –

您正在通過checkedCheckbox的一個數值來自母公司通過props。你確定你更新父項中的新狀態並再次傳遞一個新的道具嗎？

下面是使用你的代碼的例子：

const { Checkbox } = ReactBootstrap; 
 

 
class App extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 
    this.state = { 
 
     unlimited: false 
 
    }; 
 
    } 
 

 
onChange = (evt) => { 
 
    const target = evt.target; 
 
    const name = target.name; 
 
    const value = target.type === 'checkbox' ? target.checked : target.value; 
 
    this.setState({ 
 
     [name]: value 
 
    }); 
 
}; 
 

 
    render() { 
 
    const { unlimited } = this.state; 
 
    return (
 
     <div> 
 
     <input 
 
      name="unlimited" 
 
      type="checkbox" 
 
      checked={this.state.unlimited} 
 
      onChange={this.onChange} /> 
 
     <Checkbox 
 
      name="unlimited" 
 
      onChange={this.onChange} 
 
      checked={this.state.unlimited} 
 
     > 
 
      UNLIMITED {this.state.unlimited.toString()} 
 
     </Checkbox> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(<App />, document.getElementById("root"));

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.31.3/react-bootstrap.min.js"></script> 
 
<div id="root"></div>

編輯

在重寫bootstrap.js的經驗嗎？這是我們的應用程序的全球模板頁（PHP智者）

我不是一個PHP的專家，但我想你可以有條件地渲染bootstrap.js script標籤，所以當你重定向到使用該頁面您的react應用程序不會呈現<script>標記。

來源

2017-10-17 16:03:12

看我編輯的代碼 - 我正在更新狀態並已確認。 –

您現在正在使用'this.state.unlimited'作爲'checked'道具，但是您絕不會更新它。你必須更新你傳遞給checked函數的布爾值。看到我上面的例子 –

我正在用this.setState設置狀態。你什麼意思？ –

你有一個控制的輸入 - 見https://reactjs.org/docs/forms.html#controlled-components

在這種情況下，檢查被綁定到父組件的支柱fields={unlimited}

您通過onChange={}告訴你的父母，有一個新的名稱和價值 - 它會達到它setState()在傳遞一個新的fields.unlimited

EG的方式，你的狀態父母可以是：

class Foo extends Component { 
    state = { 
    unlimited: false 
    } 

    onChange = (name, value) => this.setState({[name]: value}) 

    render(){ 
    return <MyOtherComponent fields={this.state} onChange={this.onChange} /> 
    } 
}

如果你的組件本身是有狀態的（查看你的handleChange），那麼你可以轉換爲不受控制的（https://reactjs.org/docs/uncontrolled-components.html）或者綁定到你的本地狀態，如果你從mount上的道具和它獲取道具時同步它。

來源

2017-10-17 16:08:04

我發佈了錯誤的代碼，我糾正它只依賴於本地狀態 –

Bootstrap複選框不切換

回答

相關問題