react实现双向数据绑定

174 阅读1分钟

父组件:将changed传递给子组件

<Person   
    myclick={this.switchNameHandler.bind(this,'西柚西柚')}   
    name={this.state.persons[0].name}   
    count={this.state.persons[0].count}   
    changed={this.nameChangeHandler.bind(this)}
/>

nameChangeHandler = (event) =>{
    console.log(event)
    console.log('拿到的value值',event.target.value)
}

子组件:子组件接收到的changed 

import React from 'react'
const Person = (props) => {    
    return (        
        <div className="person">            
            <p onClick={props.myclick}>大家好,我是{props.name},我的年龄{props.count}</p>
            <p>{props.children}</p>            
            <input type="text" onChange={props.changed} defaultValue={props.name} />
        </div>    
    )
}
export default Person;

注:有onChange的时候,要使用defaultValue来代替value。


欢迎来访问博客:blog.csdn.net/Miss_liangr…