javascript - React 通过 子组件 进行双向数据绑定的问题
迷茫
迷茫 2017-04-11 10:34:12
0
2
644
import React from 'react'

class Chinds extends React.Component{
    render(){
        return <p>
            <input value={this.props.dataValue} onChange={this.props.dataChange.bind(this)}/>
            <p>{this.props.dataValue}</p>
        </p>
    }
}

class Parent extends React.Component{
    constructor (props){
        super(props);
        this.state = {
            value:"双向数据绑定"
        }
    }
    handleChange (event){
        this.setState({value:event.target.value})
    }
    render(){
        var value = this.state.value;
        return <p>
            <Chinds dataValue={value} dataChange={this.handleChange}/>
        </p>
    }
}

export default Parent;

无论我怎么操作input它的值都没有发生变化

不使用子组件的时候这样是没问题的,这个逻辑哪里有问题呢?

迷茫
迷茫

业精于勤,荒于嬉;行成于思,毁于随。

全部回覆(2)
左手右手慢动作

子组件通信需要把数据state绑定到父组件上,建议react 结合redux使用。

刘奇

找到原因了

onChange={this.props.dataChange.bind(this)

我把事件绑定到了子组件上,所以改变的value数据只是子组件的

dataChange={this.handleChange.bind(this)}

换到了这里就没问题了

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板