在实际工作过程中需要这样的需求,下面我将把实现的过程记录下来
简述一下我的方法:按照车牌号的位数,渲染出相同个数的input输入框,每个输入框接收特定的值,通过ref(DOM)对每个输入框进行操作。
程序截图
首先是将静态界面搭建起来
第一步是渲染键盘主体内容
车牌号是由省份缩写汉字和大写字母以及数字组成,所以键盘应该有两种类别;
// 最终显示的键盘
board: [],
// 字母数字键盘
mix_board: [
["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"],
["Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P"],
["A", "S", "D", "F", "G", "H", "J", "K", "L"],
["返回", "Z", "X", "C", "V", "B", "N", "M", "删除"],
],
// 省份缩写键盘
provice_board: [
["京", "沪", "粤", "津", "冀", "晋", "蒙", "辽", "吉", "黑"],
["苏", "浙", "皖", "闽", "赣", "鲁", "豫", "鄂", "湘", "桂"],
["琼", "渝", "川", "贵", "云", "藏", "陕", "甘", "青", "宁"],
["ABC", "新", "使", "领", "警", "学", "港", "澳", "删除"],
],
定义两个状态来表示不同种类的键盘,以便进行键盘类别的切换
/**
* @param type 键盘类型
* 确定需要展现的键盘
*/
selectBoard = (type) => {
if (type === "provice") this.setState({ board: this.state.provice_board });
if (type === "mix") this.setState({ board: this.state.mix_board });
};
componentWillMount() {
// 默认省份缩写键盘
this.selectBoard("provice");
}
// 创建键盘布局
createBoard = () => {
let funName = ["清空", "退格", "ABC", "删除", "返回"];
return (
<div className="boardMain">
{this.state.board.map((item, index) => {
return (
<div className="keyboard_content" key={index}>
{item.map((item_key, index_key) => {
return (
<Col key={"col_" + item_key + index_key}>
{
<Button
type="primary"
size="large"
className={
funName.includes(item_key) ? "mix mix_fun" : "mix"
}
value={item_key}
onClick={() => {
//键盘按钮点击事件
}}
>
{item_key}
</Button>
}
</Col>
);
})}
</div>
);
})}
</div>
);
};
将有特殊功能,特定样式的按钮,首先做上标记,在渲染的过程中赋予它们特定的CSS样式
第二步是渲染输入框
// 创建输入框布局
createInput = () => {
return (
<div className="inputMain">
<div className="region">
<input
className="word number_item"
ref={this.number_region_word}
onFocus={() => {
this.setState({ currentInput: this.number_region_word.current });
}}
onChange={(val) => {
console.log(val);
}}
/>
<input
className="letter number_item"
ref={this.number_region_letter}
onFocus={() => {
this.setState({
currentInput: this.number_region_letter.current,
});
}}
/>
</div>
<div className="circle"></div>
<div className="number">
<input
className="number_item"
ref={this.number_item_1}
onFocus={() => {
this.setState({
currentInput: this.number_item_1.current,
});
}}
/>
<input
className="number_item"
ref={this.number_item_2}
onFocus={() => {
this.setState({
currentInput: this.number_item_2.current,
});
}}
/>
<input
className="number_item"
ref={this.number_item_3}
onFocus={() => {
this.setState({
currentInput: this.number_item_3.current,
});
}}
/>
<input
className="number_item"
ref={this.number_item_4}
onFocus={() => {
this.setState({
currentInput: this.number_item_4.current,
});
}}
/>
<input
className="number_item"
ref={this.number_item_5}
onFocus={() => {
this.setState({
currentInput: this.number_item_5.current,
});
}}
/>
</div>
<div
className="elecCar"
style={{ display: this.state.existNew ? "" : "none" }}
>
<input
className="number_item"
ref={this.number_item_6}
onFocus={() => {
this.setState({
currentInput: this.number_item_6.current,
});
}}
/>
</div>
</div>
);
};
并获取它们所有的ref
componentDidMount() {
// 首次加载完成之后焦点默认在第一个输入框内
this.number_region_word.current.focus();
this.state.carNumberArray = [
this.number_region_word.current,
this.number_region_letter.current,
this.number_item_1.current,
this.number_item_2.current,
this.number_item_3.current,
this.number_item_4.current,
this.number_item_5.current,
this.number_item_6.current,
];
}
主要方法
①键盘按钮点击事件
// 键盘按键点击事件
clickKey = (boardKey) => {
if (boardKey === "返回") {
this.selectBoard("provice");
} else if (boardKey === "ABC") {
this.selectBoard("mix");
} else if (boardKey === "删除") {
if (this.number_region_letter.current.value === "")
this.selectBoard("provice");
this.state.currentInput.value = "";
if (this.number_region_word.current.value)
this.setState({ currentInput: this.number_region_word.current });
if (this.number_region_letter.current.value)
this.focusLastInput(this.number_region_letter.current);
if (this.number_item_1.current.value)
this.focusLastInput(this.number_item_1.current);
if (this.number_item_2.current.value)
this.focusLastInput(this.number_item_2.current);
if (this.number_item_3.current.value)
this.focusLastInput(this.number_item_3.current);
if (this.number_item_4.current.value)
this.focusLastInput(this.number_item_4.current);
if (this.number_item_5.current.value)
this.focusLastInput(this.number_item_5.current);
if (this.number_item_6.current.value)
this.focusLastInput(this.number_item_6.current);
} else {
this.state.currentInput.value = boardKey;
if (this.number_region_word.current.value)
this.focusNextInput(this.number_region_word.current);
if (this.number_region_letter.current.value)
this.focusNextInput(this.number_region_letter.current);
if (this.number_item_1.current.value)
this.focusNextInput(this.number_item_1.current);
if (this.number_item_2.current.value)
this.focusNextInput(this.number_item_2.current);
if (this.number_item_3.current.value)
this.focusNextInput(this.number_item_3.current);
if (this.number_item_4.current.value)
this.focusNextInput(this.number_item_4.current);
if (this.number_item_5.current.value)
this.focusNextInput(this.number_item_5.current);
if (this.number_region_word.current.value) this.selectBoard("mix");
}
};
输入一位焦点自动跳转到下一输入框
focusNextInput(thisinput) {
var inputs = this.state.carNumberArray;
for (var i = 0; i < inputs.length; i++) {
if (i === inputs.length - 1) {
inputs[0].focus();
break;
} else if (thisinput === inputs[i]) {
inputs[i + 1].focus();
break;
}
}
}
删除一个焦点自动跳转到上一位
focusLastInput(thisinput) {
var inputs = this.state.carNumberArray;
for (let i = inputs.length - 1; i >= 0; i--) {
if (thisinput === inputs[i]) {
inputs[i].focus();
break;
}
}
}