與Vue 相比 React 是如何實現數據雙向綁定的？

1.v-model react沒有實現

 

2.在react中數據是單向的 js---->dom

 

3.在react中如果需要數據雙向綁定，js--->dom的綁定，有自己實現onChange事件

 

4.可以實現雙向綁定的標簽有input:text textarea select

import React, { Component } from 'react'

export default class App extends Component{

    constructor(){
        super();
        this.state = {
            message: 'hello',
            year: 2000
        }
    }
    
    render(){

        let {message, year} = this.state;

        return (
            <div>
                {/* v-model react沒有實現 */}
                {/* 在react中數據是單向的  js---->dom */}

                {/* 在react中如果需要數據雙向綁定，js--->dom的綁定，有自己實現onChange事件 */}
                {/* 可以實現雙向綁定的標簽有input:text  textarea  select */}

                <input type="text" value={message} onChange={this.inputChangeAction}/>

                <button onClick={()=>{
                    this.setState({message: 'hi'});
                }}>修改</button>

                <select value={year} onChange={this.selectChangeAction}>
                    <option>1990</option>
                    <option>2000</option>
                    <option>2010</option>
                    <option>2020</option>
                </select>
            </div>
        )
    }

    inputChangeAction = (ev)=>{
        console.log('變化了');
        console.log(ev.target.value);

        this.setState({message: ev.target.value});

    }

    selectChangeAction = (ev)=>{
        this.setState({year: ev.target.value});
    }
}