如何在ReactJs中將狀態用作檢查的屬性？

Question

我在渲染中使用了開關複選框，因此檢測它是否爲checked的一個重要屬性是defaultChecked。我之前在componentWillReceiveProps中設置了狀態。我嘗試先將狀態作爲屬性，但在編譯代碼爲babel.js時出現錯誤Unexpected token。在我嘗試使用dangerouslySetInnerHTML之後，它仍然沒有工作（底部錯誤）。

首先嚐試：

<input type="checkbox" name="onoffswitch" {this.state.required} /> 

App.jsx

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

    componentWillReceiveProps(nextProps){ 
     //more code  
     this.setState({ 
      required: 'defaultChecked' 
     }); 
    }; 

    render() { 
     return(
     <div id="section">     
      <div className="bottom-question"> 
       <div> 
        <div className="onoffswitch-add pull-left"> 
         <input type="checkbox" 
           name="onoffswitch" 
           dangerouslySetInnerHTML={this.state.required} /> 

         <label className="onoffswitch-label-add" htmlFor="switch-required"> 
          <div className="onoffswitch-inner-add"></div> 
          <div className="onoffswitch-switch-add"></div> 
         </label> 
        </div> 
       </div> 
      </div> 
     </div> 
    ) 
    } 
} 

錯誤：

The full text of the error you just encountered is: 

input is a void element tag and must neither have `children` 
nor use `dangerouslySetInnerHTML`. Check the render method of EditInput 

Answer 1

什麼你想要它（在這種情況下，你使用字符串'defaultChecked'），你需要告訴輸入檢查自己或沒有根據。

我會建議你重構狀態變量是一個布爾值，並調用它checked像這樣

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

    componentWillReceiveProps(nextProps){ 
     //more code  
     this.setState({ 
      checked: true 
     }); 
    }; 

    render() { 
     return(
     <div id="section">     
      <div className="bottom-question"> 
       <div> 
        <div className="onoffswitch-add pull-left"> 
         <input type="checkbox" 
           name="onoffswitch" 
           checked={this.state.checked} /> 

         <label className="onoffswitch-label-add" htmlFor="switch-required"> 
          <div className="onoffswitch-inner-add"></div> 
          <div className="onoffswitch-switch-add"></div> 
         </label> 
        </div> 
       </div> 
      </div> 
     </div> 
    ) 
    } 
} 

Answer 2

我想你想<input required={this.state.required} />

Answer 3

陣營有此屬性。

<input type="checkbox" name="onoffswitch" disabled={this.state.required} /> 

其中this.state.required是您要使用checked屬性來檢查適用於JavaScript的

<input type="checkbox" name="onoffswitch" checked={this.state.required === 'defaultChecked'} /> 

當你設置成所需要的狀態的複選框，輸入一個boolean

Answer 4

你會希望有一個disabled道具爲您的按鈕就是true時未選中該複選框，當它是和false。

爲此，請從存儲複選框值的狀態變量開始。然後添加一個在onChange事件中觸發的函數，該函數將狀態從true-> false切換，反之亦然。

當該複選框未選中時，該按鈕應該被禁用。

class MyApp extends React.Component { 
 
    constructor() { 
 
    super(); 
 
    this.state = { 
 
     checkboxState: false 
 
    }; 
 
    } 
 
    
 
    toggleCheckbox =() => { 
 
    this.setState({checkboxState: !this.state.checkboxState}); 
 
    } 
 
    
 
    render() { 
 
    return (
 
     <form> 
 
     <input type="checkbox" name="onoffswitch" onChange={this.toggleCheckbox} /> 
 
     <input type="submit" disabled={!this.state.checkboxState} value="submit" /> 
 
     </form> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(<MyApp />, document.getElementById("app"));

<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> 
 
<div id="app"></div>