React实现双向数据绑定

react中的数据是单项绑定的,要想实现双向绑定对比vue还是要麻烦点的
react规定input中绑定的value如果是可变的值,必须提供一个onChange函数,或者变成readonly只读,或者使用defaultValue,显然要实现双向数据绑定就要给input一个onChange事件,在onChange事件中改变state中的值来改变value

react函数传参也有点小麻烦可以用 onChange={this.operation.bind(this,-1)}来传参
实现:

export default class Counter extends React.Component{
     
    constructor(props){
     
        super(props)
        this.state = {
     
            count:props.count
        }
    }
    static defaultProps = {
     //如果没有传props,props的默认值
        count:0
    }
    render(){
     
        return (
            <div ref="wrap">
                <button onClick={
     this.operation.bind(this,-1)}>-</button>
                <input type="button" value={
     this.state.count} />
                <button onClick={
     this.operation.bind(this,1)}>+</button><br/>
                操作结果:<input ref="ipt" type="number" value={
     this.state.count} onChange={
     this.readyChange} />
            </div>
        )
    }
    operation = (o) => {
     
        this.setState({
     
            count:this.state.count+o
        })
    }
    readyChange = () => {
     
        this.setState({
     
          count:Number(this.refs.ipt.value)
        })
    }
}

你可能感兴趣的:(react,javascript,reactjs)