用react完成在页面上渲染几个span元素,及一个文本框,当点击某个span元素时,将该元素的内容在文本框中显示出来。 要求:将span元素定义在子组件内,将input文本框定义在父组件内要完整可运行的代码
时间: 2023-06-10 21:08:42 浏览: 35
以下是一个简单的实现,包括一个父组件和一个子组件:
```javascript
import React, { useState } from "react";
function SpanElement(props) {
return (
<span onClick={() => props.onClick(props.content)}>{props.content}</span>
);
}
function ParentComponent() {
const [selectedContent, setSelectedContent] = useState("");
const handleClick = (content) => {
setSelectedContent(content);
};
return (
<div>
<div>
<input type="text" value={selectedContent} readOnly />
</div>
<div>
<SpanElement content="Span 1" onClick={handleClick} />
<SpanElement content="Span 2" onClick={handleClick} />
<SpanElement content="Span 3" onClick={handleClick} />
</div>
</div>
);
}
export default ParentComponent;
```
在父组件`ParentComponent`中,我们使用了`useState` hook来维护当前选中的内容,并将其作为`value`属性传递给`<input>`元素。同时,我们定义了`handleClick`函数,它将被传递给子组件`SpanElement`作为`onClick`属性。
在子组件`SpanElement`中,我们将`content`作为`props`传递进来,并将其渲染到`<span>`元素中。同时,我们将`props.onClick`作为`onClick`属性传递给`<span>`元素,以便在点击时调用父组件的`handleClick`函数。
当点击任何一个`<span>`元素时,将会调用`handleClick`函数并将该`<span>`元素的内容作为参数传递进来,然后将其设置为当前选中的内容。这将导致`<input>`元素的值发生变化,并显示所选`<span>`元素的内容。