EP144. “小技巧：新增答案行自动聚焦”

一个可选的体验优化小技巧：点击「Add another answer」新增一行后，希望新的输入框能自动获得焦点、可以直接开始打字，不用再手动点一下。做法是给新增的空答案项用 undefined 而不是空字符串 "" 当占位值，这样就能用「这一项的值是不是 undefined」来唯一识别「刚刚新增、还没有输入过任何内容的那一行」，再用这个判断结果驱动 TextControl 的 autoFocus 属性。

涉及文件

• wp-content/plugins/are-you-paying-attention/src/index.js （可选修改）

代码实现

「Add another answer」按钮：新增项用 undefined 代替空字符串 ""：

<Button isPrimary onClick={() => {
  props.setAttributes({answers: props.attributes.answers.concat([undefined])})
}}>Add another answer</Button>

答案输入框加上 autoFocus，只在值是 undefined 时为真：

<TextControl autoFocus={answer == undefined} value={answer} onChange={/* 同前面讲座 */} />

关键改动点：

• 平时新增一行答案，惯用的占位值是空字符串 ""，但这没法跟「用户后来把内容删空」的情况区分开——两者的值都是 ""。改用 undefined 当新增行的初始值，就能精确识别出「这一项是刚点击按钮生成的、从未被输入过」这个唯一状态
• autoFocus={answer == undefined}：autoFocus 是 HTML/React 表单元素的标准属性，值为 true 时页面渲染完会自动把光标定位到这个输入框——这里的表达式只有在当前循环到的这一项恰好是刚新增、值仍是 undefined 时才会为 true，其余已经有内容（包括空字符串）的行都不会重复抢焦点
• 这个技巧的关键在于「用一个专属的哨兵值（sentinel value，这里是 undefined）来标记特殊状态」，而不是复用一个可能有歧义的普通值（空字符串），是处理类似「区分新建 vs 已清空」场景时常用的思路

常见坑

• 用空字符串 "" 而不是 undefined 当新增行的占位值——没法区分「刚新增还没输入」和「用户主动清空了内容」这两种情况，导致自动聚焦逻辑要么对已清空的旧行也生效，要么完全不工作

Sources

Udemy：

• Become a WordPress Developer: Unlocking Power With Code — Section 25, EP144