仅更改React中输入字段的前两个数字

Question

我需要一个文本输入字段，该字段允许用户仅输入一千个值的前两个数字。分隔符后的三个零应固定。

屏幕截图：

我使用React，对于其他输入字段，我使用React-Input-Mask

Answer 1

您可以创建自定义蒙版。假设如下。如果我了解你。

var MyMaskIntput = React.createClass({
    getInitialState: function () {
        return {
            val: ""
        };
    },
    handleChange: function (e) {
        this.setState({ val: e.target.value });
    },
    componentDidMount: function () {
        var $elem = $(React.findDOMNode(this.refs.maskedInput));
        var reverse = { reverse: false };

        if (this.props.isReverse) {
            reverse = { reverse: true };
        }

        $elem.mask(this.props.mask, reverse);
    },
    render: function () {
        return (<div>
            <input type="text" onChange={this.handleChange} ref="maskedInput"></input>
            {this.state.val}
        </div>);
    }
});

React.render(
    <div>
        KM = <MyMaskIntput isReverse={true} mask={"#0.000"} /><br />
    </div>
    , document.getElementById("content"));

它将返回以下结果。如果输入1s。 11.111 您还可以设置一些限制。