react的 受控组件、非受控组件ref

import React from 'react'
export default class CommentBox extends React.Component {
    constructor(props) {
        super(props)
        // 受控组件改为非受控组件
        // this.state = {
        //     value: ''
        // }
    }
    // handleChange(event) {
    //     this.setState({
    //         value: event.target.value
    //     })
    // }
    handleSubmit(event){
        // alert(this.state.value);
        alert(this.textInput.value)
        event.prevenDefault()  //禁止form提交跳转
    }
    render() {
        return (
            <form className="p-5" onSubmit={(event)=>{this.handleSubmit(event)}}>
                <div className="form-group">
                    <label htmlFor="">留言内容</label>
                    <input type='text' className='form-control' 
                    // onChange={(event)=>{this.handleChange(event)}} 
                    // value={this.state.value}
                    ref={(textInput)=>{this.textInput=textInput}}
                    placeholder='请输入内容' >
                    </input>
                </div>
                <button type='submit' className='btn btn-primary'>留言</button>
            </form>
        )
    }
}

ref 是 js 属性   参数为dom节点

 

非受控组件虽然可以建议代码量，但是还是建议使用受控组件，