表单复选框和单选按钮如何与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/