当我的输入值发生变化时，我的 "onChange" 函数没有触发 - 使用 React Hooks

Question

我复制了下面的代码并做了一些轻微的修改。无论出于何种原因，我都无法在表格中输入。在抛出一些日志后，我可以看到 handleSubmit 函数甚至没有被调用。

我正在一个更大的 React-Redux 应用程序的上下文中使用此组件。为了测试如果此组件，Redux 循环是否以某种方式影响渲染，我摆脱了连接 redux 函数，但仍然 - 没有变化。请帮忙。

const Lose = props => {
const [username, setUsername] = useState();
const handleChangeUsername = e => {
setUsername(e.target.value);
};
const handleSubmit = event => {
alert(username);
event.preventDefault();
};
return (
<div className={'main_popup'}>
<H3
text={`Nice game! You obliterated: ${
props.monstersKilled
} monsters. Enter your name to have your badassery forever recorded`}
/>
<form onSubmit={handleSubmit}>
Username:
<input type="text" value={username} onChange={handleChangeUsername} />
</form>
</div>
);
};
const mapStateToProps = state => ({
...state.popUp,
...state.player
});
export default connect(mapStateToProps)(handlePopUp(Lose));

下面是调用上述组件的代码：

class Player extends Component {
componentDidUpdate(prevProps) {
checkIfDead();
}
render() {
return (
<div
style={{
position: 'absolute',
top: this.props.position[1],
left: this.props.position[0],
backgroundImage: `url('${
this.props.status === 'HURT'
? walkSpriteHurt
: this.props.status === 'LEVEL_UP_YELLOW'
? walkSpriteLevelUpYellow
: this.props.status === 'LEVEL_UP_BLACK'
? walkSpriteLevelUpBlack
: walkSprite
}')`,
backgroundPosition: this.props.spriteLocation,
width: '40px',
height: '40px'
}}
>
<div style={{ position: 'absolute', bottom: '20px' }}>
<progress
id="health"
value={this.props.stats.health}
max={this.props.stats.totalHealth}
style={{ width: '100px' }}
/>
</div>
</div>
);
}
}
function checkIfDead() {
if (
store.getState().player.stats.health <= 0 &&
store.getState().player.dead === false
) {
store.dispatch({ type: 'KILL_PLAYER' });
store.dispatch({
type: 'CHANGE_POP_UP',
payload: {
type: 'Highscore'
}
});
}
}
const mapStateToProps = state => ({
...state.player,
...state.fire
});
export default connect(mapStateToProps)(handleKeyPress(Player));

Answer 1

好的，我想通了！因此，表单嵌套在已经附加了window.eventListener('keydown'(的组件中。一旦我将事件侦听器移动到不同的组件中，React 表单中的 onChange 函数又开始工作了。呜呜

。完了。