我在我的一个网页中使用antd TextArea字段，但当我试图设置焦点时（期待textArea中 Flink 的光标），它不起作用。
<TextArea
className=""
style={{
fontFamily: "Sen",
color: "#191919",
}}
value={revisions}
onChange={(e) => setRevisions(e.target.value)}
placeholder="Enter any packaging requirements"
autoSize={{ minRows: 4, maxRows: 6 }}
disabled={qalaraEdit}
ref={focusSheet}
/>并且在页面上的文本的点击上触发该引用，其中：
onClick={() => {
focusSheet.current.focus();
editSheetRef.current.scrollIntoView(
{ behavior: 'smooth',block: "end", inline:"nearest"}
)}
}
2条答案
按热度按时间ukxgm1gy1#
可能有几个原因导致焦点设置不正确。以下是解决此问题的一些建议：
检查是否正确分配了参考：确保将focusSheet ref正确分配给TextArea组件。您可以通过记录focusSheet.current并检查它是否引用了正确的元素来验证这一点。
验证是否触发onClick事件：确保您提到的onClick事件确实被触发。您可以在onClick处理程序中添加console.log语句，以确认单击文本时是否执行该语句。
检查是否有其他因素妨碍对焦：验证是否没有其他因素阻止TextArea接收焦点。例如，如果TextArea被禁用（disabled ={true}），它将无法接收焦点。另外，检查是否有任何父元素的CSS属性pointer-events设置为“none”，或者是否有任何其他CSS规则干扰焦点行为。
验证操作顺序：请确保在尝试设置焦点之前呈现TextArea组件。如果TextArea是有条件呈现的，并且在组件安装之前设置了ref，则它将不起作用。确保在呈现TextArea并在DOM中可见之后设置ref。
隔离试验：创建一个简化的测试用例，只使用TextArea和onClick事件来隔离问题。删除可能干扰焦点行为的任何其他代码或组件。这将有助于确定问题是特定于TextArea还是由代码中的其他因素引起的。
k7fdbhmy2#
该按钮被禁用的一些地方的国家，这就是为什么重点是不工作。现在单击CTA，我正在更改一个状态，并基于该状态的新值，使用