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)
        })
    }
}
Logo

前往低代码交流专区

更多推荐