import React, { Component } from ‘react’ class AddStudent extends Component { constructor() { super() this.stateHandler = this.stateHandler.bind(this) } // 01 定义组件中的状态 state = { number:‘’, name:‘’, sex:‘女’, age:‘’, college:‘大前端’, hobbies: [ { id:1, title:‘篮球’, isChecked:false }, { id:2, title:‘足球’, isChecked:false }, { id:3, title:‘网球’, isChecked:false }, ] } stateHandler(e) { // 获取我们当前输入的值，然后调用 setState 更新在具体的属性身上 const value = e.target.value const prop = e.target.name this.setState({ [prop]:value }, () => { console.log(this.state.college) }) } hobbyHandler(index, ev) { // 当前操作需要提前获取被操作项的索引，事件对象 const isChecked = ev.target.checked const hobbies = […this.state.hobbies] //下面的操作是在更改数据，不可以直接对原数据进行更改，所以需要新定义一个 hobbies[index].isChecked = isChecked this.setState({ hobbies }, () => { console.log(this.state.hobbies) }) } render() { return ( <divclassName=“col-md-5”> <form> <divclassName=“form-group”> <label>学号</label> <inputname={‘number’}value={this.state.number}onChange={this.stateHandler}type=“number”className=“form-control”placeholder=“请输入学号”/> </div> <divclassName=“form-group”> <label>姓名</label> <inputname={‘name’}value={this.state.name}onChange={this.stateHandler}type=“text”className=“form-control”placeholder=“请输入姓名”/> </div> <divclassName=“form-group”> <label>性别  </label> <labelclassName=“checkbox-inline”> <inputname=“sex”onChange={this.stateHandler}defaultChecked={this.state.sex === ‘男’}type=“radio”value=“男”/> 男 </label> <labelclassName=“checkbox-inline”> <inputname=“sex”onChange={this.stateHandler}defaultChecked={this.state.sex === ‘女’}type=“radio”value=“女”/> 女 </label> </div> <divclassName=“form-group”> <label>年龄</label> <inputname={‘age’}value={this.state.age}onChange={this.stateHandler}type=“text”className=“form-control”placeholder=“请输入姓名”/> </div> <divclassName=“form-group”> <label>爱好</label> { this.state.hobbies.map((hobby, index) => { return ( <div className=“checkbox” key={hobby.id}> <label> <input type=“checkbox” defaultChecked={hobby.isChecked} value={hobby.title} onChange={this.hobbyHandler.bind(this, index)}/>{hobby.title} </label> </div> ) }) } </div> <divclassName=“form-group”> <label>所属学院</label> <selectname={‘college’}value={this.state.college}onChange={this.stateHandler}className=“form-control”> <optionvalue=“大前端”>大前端</option> <optionvalue=“Java”>Java</option> <optionvalue=“python”>python</option> </select> </div> <button type=“submit” className=“btn btn-default”>添加</button> </form> </div> ) } } export default AddStudent