如何在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>