用react检测儿童焦点组件

Question

我有一个父组件，通常我在其中呈现输入字段。有没有办法知道孩子们的输入是否有焦点？

<Component>
<input />
</Component>
const Component = (props) => return (<div className="nice">{props.children}</div>)

Answer 1

我创建了一个沙箱，您可以在这里查看：https://codesandbox.io/s/chris-lisangola-c53ri-c53ri

从你发布的链接来看，我似乎主要的问题是如何处理从子组件通过道具触发到父组件的事件。如果我错了，请告诉我。

我创建了一个像这样的子组件：

import React from "react";
export default function Input(props) {
const { checkFocus } = props;
return <input onFocus={checkFocus} />;
}

在子组件中，我添加了一个类型为focus的事件侦听器，该侦听器通过checkFocus传递给父组件。

在父组件App:中

import React, { useState } from "react";
import FormInput from "./FormInput";
import "./styles.css";
export default function App() {
const [text, setText] = useState("");
const checkFocus = (e) => {
console.log(e.type);
if (e.type === "focus") {
setText("Focus");
}
};
return (
<div className="App">
<h1>Handle Focus : {text}</h1>
<FormInput checkFocus={checkFocus} />
</div>
);
}

我做了一个非常基本的测试，如果孩子的输入中有焦点，文本focus就会显示在h1 tag中