1. 程式人生 > >【react】react實現類似vue的雙向資料繫結

【react】react實現類似vue的雙向資料繫結

import React from 'react'
import ReactDOM from 'react-dom'

class Comment extends React.Component {
    constructor() {
        super()
        this.state = {
            msg:'hhhhello  world~~~~'
        }
    }

    txtChange = (e)=>{
        this.setState({
            msg: this.refs.mytxt.value
            //或者使用事件引數
            //msg: e.target.value
        })
    }
    render() {
        return <div >
                  <input type='text' style={{width:'100%'}} onChange={ (e)=> this.txtChange(e) } ref='mytxt' value={this.state.msg} />
                  <h1> {this.state.msg} </h1>         
            < /div>
    }
}



ReactDOM.render( < Comment > < /Comment> , document.getElementById("app"));