按Enter键时在TextFields之间切换焦点

Question

我需要在MaterialUI TextField上按Enter键将焦点转移到基础字段。也就是说，我需要它的行为类似于Tab键操作。

<TextField
label='Documento'
name="document"
autoComplete="document"
autoFocus
type='text'
value={data.document}
onChange={e => { handleChange(e) }}
inputProps={{ onKeyDown: handleKeyDown }}
/>
<TextField
label="Contraseña"
type="password"
autoComplete="current-password"
inputProps={{ onKeyDown: handleKeyDown }}
onChange={e => { handleChange(e) }}
/>

Answer 1

一个快速的解决方案是为底层文本字段分配一个id。例如：

<TextField
label="Contraseña"
type="password"
autoComplete="current-password"
inputProps={{ onKeyDown: handleKeyDown }}
onChange={e => { handleChange(e) }}
id="text-field-password"
/>

然后，在定义handleKeyDown函数时，您可以通过检查触发函数执行的事件是否具有键代码13来检查是否按下了回车键。然后，如果按下回车键，您可以通过您给它的id访问底层文本字段，并在文本字段上使用focus方法。这会将键盘焦点从第一个文本字段更改为第二个。类似于制表键操作。handleKeyDown函数的一个例子：

function handleKeyDown(e) {
if(e.keyCode === 13){
document.getElementById("text-field-password").focus()
}
}

如果已经定义了handleKeyDown函数，您可以将If语句放在该函数中。

Answer 2

实际上，当时我忘记澄清我正在使用React.js。向那些不厌其烦地回复的人道歉，并感谢@bystrom。

我最终通过实现React的useRef解决了这个问题。

const passFieldRef = useRef(null);

<TextField
id="document"
label='Identificación'
name="document"
value={data.document || ''}
onChange={handleChange}
inputProps={{ onKeyDown: handleKeyDown }}
/>
<TextField
name="password"
label="Contraseña"
type="password"
id="password"
inputProps={{
onKeyDown: handleKeyDown,
ref: passFieldRef
}}
value={data.password || ''}
onChange={e => { handleChange(e) }}
/>

最后，这就是handleKeyDown的定义方式，请注意，焦点更改仅适用于将焦点放在特定字段(document(上按下ENTER的情况。对于其余部分，只需执行其他逻辑。

const handleKeyDown = (e) => {
const fieldName = e.target.name;
if (e.code === "Enter") {
switch (fieldName) {
case 'document':
passFieldRef.current.focus();
break;
default:
signIn();
break;
}
}
}