棘手的问题。功能组件中是否可以进行状态提升。
从数据库接收到一定的字段数组。这些字段被传递给组件以在表中创建一个项目。每个字段都包含一个名称，例如“电话”或“地址”。这样做是为了在添加新项目时，它会在创建时相应地显示。此外，根据接收到的字段，创建输入（s），我需要从每个输入（a）中收集一个值并将其放入对象数组中。我想出的高潮是：
onChange={({ target }) => {
const { name, value } = target
setQuery(query => ({
...query,
fields: [
...query.fields,
{
name,
value
}
]
}))
}}结果在哪里
fields: (23) […]
0: Object { name: "Телефон", value: "ы" }
1: Object { name: "Телефон", value: "ыа" }
2: Object { name: "Телефон", value: "ыау" }
3: Object { name: "Телефон", value: "ыауы" }
4: Object { name: "Телефон", value: "ыауыу" }
5: Object { name: "Телефон", value: "ыауыуа" }
6: Object { name: "Адрес", value: "ф" }
7: Object { name: "Адрес", value: "фы" }
8: Object { name: "Адрес", value: "фыа" }
9: Object { name: "Адрес", value: "фыаф" }
10: Object { name: "Адрес", value: "фыафы" }
11: Object { name: "Адрес", value: "фыафыа" }
12: Object { name: "Адрес", value: "фыафыау" }
13: Object { name: "Почта", value: "ф" }
14: Object { name: "Почта", value: "фы" }
15: Object { name: "Почта", value: "фыа" }
16: Object { name: "Почта", value: "фыаф" }
17: Object { name: "Почта", value: "фыафы" }
18: Object { name: "Почта", value: "фыафыу" }
19: Object { name: "Почта", value: "фыафыуа" }
20: Object { name: "Почта", value: "фыафыуаы" }
21: Object { name: "Почта", value: "фыафыуаыу" }
22: Object { name: "Почта", value: "фыафыуаыуа" }没有更多的力量了。帮助！
学习React，决定设计自己的自行车（carousel），在连接handler的过程中，遇到了一个难以理解的情况。当我们以混乱的顺序按下幻灯片更改按钮时，幻灯片会在一张，然后是两张，以此类推。告诉我可能是什么原因。我认为这很可能是 setState() 方法。
export default class HeroCarousel extends Component {
state = {
slides: [
{
caption: {
title: 'Slide one',
text: `Lorem ipsum dolor sit amet, malorum recteque reprehendunt ea vel.
Urbanitas adolescens vim te, per at tritani aperiri. Adhuc invenire convenire his ea.`,
},
bg: 'images/content/hero_carousel/slides/img.jpg',
},
{
caption: {
title: 'Slide two',
text: `Lorem ipsum dolor sit amet, malorum recteque reprehendunt ea vel.
Urbanitas adolescens vim te, per at tritani aperiri. Adhuc invenire convenire his ea.`,
},
bg: 'images/content/hero_carousel/slides/img1.jpg',
},
{
caption: {
title: 'Slide three',
text: `Lorem ipsum dolor sit amet, malorum recteque reprehendunt ea vel.
Urbanitas adolescens vim te, per at tritani aperiri. Adhuc invenire convenire his ea.`,
},
bg: 'images/content/hero_carousel/slides/img2.jpg',
},
{
caption: {
title: 'Slide four',
text: `Lorem ipsum dolor sit amet, malorum recteque reprehendunt ea vel.
Urbanitas adolescens vim te, per at tritani aperiri. Adhuc invenire convenire his ea.`,
},
bg: 'images/content/hero_carousel/slides/img3.jpg',
},
{
caption: {
title: 'Slide five',
text: `Lorem ipsum dolor sit amet, malorum recteque reprehendunt ea vel.
Urbanitas adolescens vim te, per at tritani aperiri. Adhuc invenire convenire his ea.`,
},
bg: 'images/content/hero_carousel/slides/img4.jpg',
},
{
caption: {
title: 'Slide six',
text: `Lorem ipsum dolor sit amet, malorum recteque reprehendunt ea vel.
Urbanitas adolescens vim te, per at tritani aperiri. Adhuc invenire convenire his ea.`,
},
bg: 'images/content/hero_carousel/slides/img5.jpg',
},
],
breadcrumbs: [
{
previewImage: 'images/content/hero_carousel/breadcrumbs/img.jpg',
ariaLabel: 'Example breadcrumb',
},
{
previewImage: 'images/content/hero_carousel/breadcrumbs/img1.jpg',
ariaLabel: 'Example breadcrumb',
},
{
previewImage: 'images/content/hero_carousel/breadcrumbs/img2.jpg',
ariaLabel: 'Example breadcrumb',
},
{
previewImage: 'images/content/hero_carousel/breadcrumbs/img3.jpg',
ariaLabel: 'Example breadcrumb',
},
{
previewImage: 'images/content/hero_carousel/breadcrumbs/img4.jpg',
ariaLabel: 'Example breadcrumb',
},
{
previewImage: 'images/content/hero_carousel/breadcrumbs/img5.jpg',
ariaLabel: 'Example breadcrumb',
},
],
position: 0,
}
goToNextSlide = () => {
let {
position,
slides
} = this.state;
if (position === slides.length - 1) {
position = 0
}
++position
return this.setState({
position: position
})
}
goToPrevSlide = () => {
let {
position,
slides
} = this.state;
if (position === 0) {
position = slides.length - 1
}
--position
return this.setState({
position: position
})
}
render() {
return (
<div className="carousel" id="hero-carousel">
{/* Begin control next*/}
<HeroCarouselControlRight handler={this.goToNextSlide} />
{/* End control next transform ease-out 450ms */}
{/* Begin control previous*/}
<HeroCarouselControlLeft handler={this.goToPrevSlide} />
{/* End control previous */}
<div className="carousel__inner" style={{
transition: 'transform ease-out 450ms',
transform: `translateX(-${this.state.position}00%)`
}}>
{this.state.slides.map((slide, index) =>
<HeroCarouselSlide
title={slide.caption.title}
text={slide.caption.text}
key={index}
bg={slide.bg}
/>
)}
</div>
<ul className="carousel__thumbs">
{this.state.breadcrumbs.map((breadcrumb, index) =>
<HeroCarouselBreadCrumb
previewImage={breadcrumb.previewImage}
dataSlideTo={index}
ariaLabel={breadcrumb.ariaLabel}
handler={this.goToSlide}
key={index}
/>
)}
</ul>
</div>
)
}
}
在学习 react 的时候，我在 react-bootstrap 中发现了一个有趣的设计：
<Nav
activeKey="/home"
onSelect={selectedKey => alert(`selected ${selectedKey}`)}>
<Nav.Item>
<Nav.Link href="/home">Active</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="link-1">Link</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="link-2">Link</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="disabled" disabled>
Disabled
</Nav.Link>
</Nav.Item>
</Nav>什么是 Nav.Item，我在哪里可以了解它？