受控组件 — 像input将数据交给state 再从state中取出,而不是直接从input中获取 非受控组件 — ref

非受控组件

ref获取input的value，通过操作value完成逻辑操作

export default class App extends Component {
    myusername = React.createRef()
    render() {
        return (
            <div>
                <h1>登录页</h1>
                <input type="text" ref={this.myusername} defaultValue="kerwin"/>
                <button onClick={()=>{
                    console.log(this.myusername.current.value)
                }}>登录</button>
                <button onClick={()=>{
                    this.myusername.current.value = ""
                }}>重置</button>
                {/* <Child myvalue={this.myusername.current.value}/> */}
            </div>
        )
    }
}

表单组件案例-ref版非受控

有时候非受控组件比受控组件简单得多, 根据情况而使用, 在该案例中非受控更方便 案例 : 根据传入值设置input为不同type的ui组件

//子组件 提供ui组件
class Field extends Component{
    state =  {
        value:""
    }
    //清空value
    clear(){
        this.setState({
            value:""
        })
    }
    //设置value
    setValue(value){
        this.setState({
            value:value
        })
    }
    render(){
        return <div style={{background:"yellow"}}>
            <label>{this.props.label}</label> //用户名|密码
            <input type={this.props.type} onChange={(evt)=>{
                this.setState({
                    value:evt.target.value//输入时设置value
                })
            }} value={this.state.value}/>//回写input的value
        </div>
    }
}
//父组件
export default class App extends Component {
    username = React.createRef()
    password = React.createRef()
    render() {
        return (
            <div>
                <h1>登录页面</h1>
                <Field label="用户名" type="text" ref={this.username}/>
                <Field label="密码" type="password" ref={this.password}/>
                <button onClick={()=>{
                  //直接通过ref获取数据
                    console.log(this.username.current.state.value,
                        this.password.current.state.value
                        )
                }}>登录</button>
                <button onClick={()=>{
                    //直接通过ref修改数据
                    this.username.current.clear()
                    this.password.current.clear()
                }}>取消</button>
            </div>
        )
    }
}

受控组件

各种表单组件1 - 不优化版

class App extends React.Component {
  state = {
    txt: '',
    content: '',
    city: 'bj',
    isChecked: false
  }

  handleChange = e => {
    this.setState({
      txt: e.target.value
    })
  }

  // 处理富文本框的变化
  handleContent = e => {
    this.setState({
      content: e.target.value
    })
  }

  // 处理下拉框的变化
  handleCity = e => {
    this.setState({
      city: e.target.value
    })
  }

  // 处理复选框的变化
  handleChecked = e => {
    this.setState({
      isChecked: e.target.checked
    })
  }

  render() {
    return (
      <div>
        {/* 文本框 */}
        <input type="text" value={this.state.txt} onChange={this.handleChange} />
        <br/>

        {/* 富文本框 */}
        <textarea value={this.state.content} onChange={this.handleContent}></textarea>
        <br/>

        {/* 下拉框 */}
        <select value={this.state.city} onChange={this.handleCity}>
          <option value="sh">上海</option>
          <option value="bj">北京</option>
          <option value="gz">广州</option>
        </select>
        <br/>

        {/* 复选框 */}
        <input type="checkbox" checked={this.state.isChecked} onChange={this.handleChecked} />
      </div>
    )
  }
}

各种表单组件2 - 优化版

class App extends React.Component {
  state = {
    txt: '',
    content: '',
    city: 'bj',
    isChecked: false
  }

  handleForm = e => {
    // 获取当前DOM对象
    const target = e.target

    // 根据类型获取值
    const value = target.type === 'checkbox'
      ? target.checked
      : target.value

    // 获取name
    const name = target.name

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

  render() {
    return (
      <div>
        {/* 文本框 */}
        <input type="text" name="txt" value={this.state.txt} onChange={this.handleForm} />
        <br/>

        {/* 富文本框 */}
        <textarea name="content" value={this.state.content} onChange={this.handleForm}></textarea>
        <br/>

        {/* 下拉框 */}
        <select name="city" value={this.state.city} onChange={this.handleForm}>
          <option value="sh">上海</option>
          <option value="bj">北京</option>
          <option value="gz">广州</option>
        </select>
        <br/>

        {/* 复选框 */}
        <input type="checkbox" name="isChecked" checked={this.state.isChecked} onChange={this.handleForm} />
      </div>
    )
  }
}