表单复选框和单选按钮如何与React.js一起使用？

Z时代
2024-01-10
分类：问答

我试图在我的React组件中创建一个表单。输入和Textarea工作正常，但我甚至不能让复选框或单选按钮显示。既不渲染，但他们的标签。我遵循reactjs.org的教程，但没有运气。表单复选框和单选按钮如何与React.js一起使用？

我错过了什么吗？

这是我有：

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> 
     ); 
    } 
}

回答：

（道歉，因为我没有足够的信誉发表评论）

你的问题不太清楚，但我相信这个问题你面对的是你的组件不在屏幕上呈现。

您的代码似乎没有问题，并且复选框显示正确。看看我尝试过的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'));