表單複選框和單選按鈕如何與React.js一起使用？

Question

我試圖在我的React組件中創建一個表單。輸入和Textarea工作正常，但我甚至不能讓複選框或單選按鈕顯示。既不渲染，但他們的標籤。我遵循reactjs.org的教程，但沒有運氣。

我錯過了什麼嗎？

這是我有：

export default class Example extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      isChecked: true 
     }; 

     this.handleCheckboxChange = this.handleCheckboxChange.bind(this); 
    } 

    handleCheckboxChange(event) { 
     const target = event.target; 
     const value = target.type === 'checkbox' ? target.checked : target.value; 
     const name = target.name; 

     this.setState({ 
      [name]: value 
     }); 
    } 

    render() { 
     return (
      <div> 
       <form> 
        <label> 
         <input name="isChecked" 
           type="checkbox" 
           checked={this.state.isChecked} 
           onChange={this.handleCheckboxChange}/> 
        ONE</label> 
        <label> 
         <input type="checkbox" 
           name="isChecked" 
           checked={this.state.isChecked} 
           onChange={this.handleCheckboxChange} /> 
        TWO</label> 
       </form> 
      </div> 
     ); 
    } 
} 

Answer 1

（道歉，因爲我沒有足夠的信譽發表評論）

你的問題不太清楚，但我相信這個問題你面對的是你的組件不在屏幕上呈現。

您的代碼似乎沒有問題，並且複選框顯示正確。 看看我嘗試過的JSFiddle。

HTML

<script src="https://reactjs.org/js/jsfiddle-integration.js"></script> 
<div id="container"> 
    <!-- This element's contents will be replaced with your component. --> 
</div> 

的JavaScript 1.7

class Example extends React.Component { 
constructor(props) { 
    super(props); 
    this.state = { 
     isChecked: true 
    }; 

    this.handleCheckboxChange = this.handleCheckboxChange.bind(this); 
} 

handleCheckboxChange(event) { 
    const target = event.target; 
    const value = target.type === 'checkbox' ? target.checked : target.value; 
    const name = target.name; 

    this.setState({ 
     [name]: value 
    }); 
} 

render() { 
    return (
     <div> 
      <form> 
       <label> 
        <input name="isChecked" 
          type="checkbox" 
          checked={this.state.isChecked} 
          onChange={this.handleCheckboxChange}/> 
       ONE</label> 
       <label> 
        <input type="checkbox" 
          name="isChecked" 
          checked={this.state.isChecked} 
          onChange={this.handleCheckboxChange} /> 
       TWO</label> 
      </form> 
     </div> 
    ); 
} 
} 



    class HelloWidget extends React.Component{ 
    constructor(props) { 
     super(props); 
    } 
    render() { 
     return <div className="widget"> 
      <Example/> 
      </div>; 
    } 
    } 

    React.render(<HelloWidget />, document.getElementById('container')); 

的jsfiddle鏈接查看輸出

http://jsfiddle.net/sam_fisher_nexus/jwm6k66c/3982/