与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});
    }
}