react双项数据绑定

1、使用onChange事件

import React, { Component } from 'react'
import List from './List.js'

class Hello extends Component{
	constructor(){
		super()
		this.state = {
			list:[
				{id:1,name:"大得",text:"评论hello"},
				{id:2,name:"大得",text:"评论hello"},
				{id:3,name:"大得",text:"评论hello"},
				{id:4,name:"大得",text:"评论hello"},
				{id:5,name:"大得",text:"评论hello"},
				{id:6,name:"大得",text:"评论hello"}
			],
			name:"大得"
		}
	}
	
	render(){
		return (
			<div >
				<h2>{this.state.name}</h2>
				<input onChange={this.inputState} value={this.state.name}/>
				<h2 onClick={this.clicks}>大得想说</h2>
				{this.state.list.map((req,index) => {
					return <List key={index} lists={req} />
				})}
			</div>
		)
	}
	
	// 双向数据绑定
	inputState = (ev)=>{
		console.log(ev.target.value)
		this.setState({
			name:ev.target.value
		})
	}
	
	// 单向数据绑定
	clicks = ()=>{
		//单向数据绑定更新值
		this.setState({
			name:"dddd"
		})
		// alert(321)
	}
}

export default Hello;

2、使用ref双向数据绑定

import React, { Component } from 'react'
import List from './List.js'

class Hello extends Component{
	constructor(){
		super()
		this.state = {
			list:[
				{id:1,name:"大得",text:"评论hello"},
				{id:2,name:"大得",text:"评论hello"},
				{id:3,name:"大得",text:"评论hello"},
				{id:4,name:"大得",text:"评论hello"},
				{id:5,name:"大得",text:"评论hello"},
				{id:6,name:"大得",text:"评论hello"}
			],
			name:"大得"
		}
	}
	
	render(){
		return (
			<div >
				<h2>{this.state.name}</h2>
				<input ref="dade" onChange={this.inputState} value={this.state.name}/>
				<input ref="dade2" onChange={this.inputState} value={this.state.name}/>
				<h2 onClick={this.clicks}>大得想说</h2>
				{this.state.list.map((req,index) => {
					return <List key={index} lists={req} />
				})}
			</div>
		)
	}
	
	// 双向数据绑定
	inputState = (ev)=>{
		// this.setState({
		// 	name:ev.target.value
		// })
		console.log(this.refs)
		this.setState({
			name:this.refs.dade.value
		})
		
	}
	
	// 单向数据绑定
	clicks = ()=>{
		//单向数据绑定更新值
		this.setState({
			name:"dddd"
		})
		// alert(321)
	}
}

export default Hello;