我有一个有状态的<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_flexGrow="1"
...>
组件，代表键盘中的键，如下所示：
Key import React from 'react';
class Key extends React.Component {
constructor(props) {
super(props);
this.state = {
id: props.id,
customClass: props.customClass,
value: props.value,
onAction: props.onAction,
active: false
};
this.handleAction = this.handleAction.bind(this);
this.resetActiveState = this.resetActiveState.bind(this);
}
handleAction(e) {
e.preventDefault();
this.setState ({
active: true
});
this.state.onAction(this.state.value);
//remove key pressed effect after 150 ms by resetting active state
_.delay(() => this.resetActiveState() , 150);
}
resetActiveState() {
this.setState ({
active: false
});
}
render() {
//conditionalProps is empty when active is false.
let conditionalProps = {};
let className = `default-btn ${this.state.customClass}`;
let displayValue = this.state.value;
//enable css attribute selector
if (this.state.active){
conditionalProps['data-active'] = '';
}
return (
<button id={this.state.id} key={this.state.id} className={className}
data-value={this.state.value} {...conditionalProps} onTouchStart={this.handleAction}>
{displayValue}
</button>
);
}
}
Key.defaultProps = {
customClass: '',
onAction: (val) => {}
};
export default Key;
用于检测触摸事件。
onTouchStart处理程序将onTouchStart状态更改为active。
true使用适当的css重新渲染以点击关键点
效果。
150分钟后，使用Component将active状态设置为false。
组件重新渲染，没有按键效果css。
resetActiveState()属性用于有条件地添加css样式（使用css属性选择器）以在呈现的组件中实现“按下按键”外观。
这可以按预期工作，但我想知道是否可以重构组件，这样我就可以将逻辑提取到父组件，然后我可以使用Key组件进行扩展。
答案 0 :(得分：2)