受控和非受控表单 | 不受控制的东西，你非要往家领？

import React, { Component } from 'react'
export class Tables extends Component {
  state = {    subject: "HTML"  }
  render() {    return (      <div>        <p>{this.state.subject}</p>        <select name="" id="" value={this.state.subject}          onChange={            (ev) => this.setState(              { subject: ev.target.value }            )          }>          <option value="JS">JS</option>          <option value="HTML">HTML</option>          <option value="CSS">CSS</option>        </select>
      </div>    )  }}
export default Tables

import React, { Component } from 'react'
export class Tables extends Component {
  state = {    sex: "男"  }
  render() {    return (      <div>        <p>{this.state.sex}</p>        <input type="radio" name="sex" id="" value="男"          onChange={            (ev) => this.setState({ sex: ev.target.value })          } /> 男        <input type="radio" name="sex" id="" value="女"          onChange={            (ev) => this.setState({ sex: ev.target.value })          } /> 女        <input type="radio" name="sex" id="" value="妖"          onChange={            (ev) => this.setState({ sex: ev.target.value })          } /> 妖      </div>    )  }}
export default Tables

import React, { Component } from 'react'
export class Tables extends Component {
  // 模拟数据源  Datas = [    {id:1,title:'HTML',isChecked:false},    {id:2,title:'JS',isChecked:true},    {id:3,title:'CSS',isChecked:false},  ]
  checks = (index,ev)=>{    // console.log(ev.target.checked)    // console.log(index)
    this.Datas[index].isChecked = ev.target.checked  }
  render() {    return (      <div>        <h2>复选框</h2>        {          this.Datas.map((data,index)=>{            return (              <label key={data.id}>                {/* 使用 onChange 事件绑定，传递下标及事件对象，在处理函数中进行状态修改 */}                <input type="checkbox" defaultChecked={data.isChecked} onChange={(ev)=>{this.checks(index,ev)}} /> {data.title}               </label>            )          })        }
        <button onClick={()=>console.log(this.Datas)} >展示多选框内容数据</button>      </div>    )  }}
export default Tables

import React, { Component } from 'react'
export class Tables extends Component {

  gets = ()=>{    console.log(this.refs.users.value)  }
  render() {    return (      <div>        <input type="text" ref='users'/>        <button onClick={()=>this.gets()}>获取</button>      </div>    )  }}
export default Tables

ReactDOM.render(    <App />,  document.getElementById('root'));

import React, { Component } from 'react'
export class Tables extends Component {  constructor (){    super()    this.myref = React.createRef()  }
  gets = ()=>{    console.log(this.myref.current.value)  }
  render() {    return (      <div>        <input type="text" ref={this.myref} />        <button onClick={()=>this.gets()}>获取</button>      </div>    )  }}
export default Tables