用react完成在页面上渲染几个span元素,及一个文本框,当点击某个span元素时,将该元素的内容在文本框中显示出来。 要求:将span元素定义在子组件内,将input文本框定义在父组件内
时间: 2023-06-10 13:08:37 浏览: 46
这里是一个可能的解决方案:
```jsx
import React, { useState } from "react";
function Span(props) {
return (
<span onClick={() => props.onClick(props.value)}>{props.value}</span>
);
}
function App() {
const [selectedValue, setSelectedValue] = useState("");
const handleClick = (value) => {
setSelectedValue(value);
};
return (
<div>
<Span value="Hello" onClick={handleClick} />
<Span value="World" onClick={handleClick} />
<Span value="React" onClick={handleClick} />
<input type="text" value={selectedValue} readOnly />
</div>
);
}
export default App;
```
在这个例子中,我们定义了一个 `Span` 组件,它接收一个 `value` 属性和一个 `onClick` 回调函数。当用户点击这个 `span` 元素时,我们将调用 `onClick` 回调函数并传递 `value`。在父组件中,我们使用 `useState` hook 来追踪用户选择的值,并将其传递给 `input` 元素的 `value` 属性。
请注意,在这个解决方案中,我们将所有 `Span` 组件放在一个父组件中。如果你需要将这些 `span` 元素分别放在不同的子组件中,你需要使用 `props` 属性将 `onClick` 回调函数从父组件传递给子组件。