React input 标签不能改变值，为神马？

Question

class FastPager extends React.Component<IFastPager, any>{
    constructor() {
        super();

        this.state = { current: 1 }
    }
    componentWillMount() {
        this.state.current = this.props.current;
    }
    handleChange(e) {
        //alert(e.target.value);
    }
    render() {
        return (
            <span className="ws-pager-fast">
                <label> 到第
                <input type="number" className="ws-pager-fast-page-number" value={this.state.current} onChange={e => this.handleChange(e)} />
                    页
                    </label>
                <input type="button" className="ws-pager-fast-confrim" value="确定" />
            </span>
        );
    }
}

为神马第一个input的值不能改变，压根不能输入啊。

Answer 1

问题很简单，因为指定了value是受控组件，需要配合onChange事件，至于为什么会发生这种情况，很简单，react强调的是视图是状态（数据）的体现，在更改表单的过程会发生：

• 表单值发生变化时触发onChange事件

• 重新渲染组件

输入内容时，触发onChange，由于你没有指定onChange事件来改变state，所以重新渲染组件时，会渲染成之前的值。

dom的值曾经变化了，只不过很快又被react给改了回来，所以给你的感觉是没有发生变化。

Answer 2

value 换成 defaultValue就可以了

Answer 3