[英]React: Rendering state array
我正在使用 React 制作一个搜索表单,其中包含一个多选标签,该标签将所选选项作为数组添加到状态中。
如何将所选项目作为可移动按钮成功渲染到框 div 中?
class Search extends React.Component {
constructor(props) {
super(props)
this.state = { selected: [] }
this.handleChange = this.handleChange.bind(this)
}
handleChange = e => {
let item = e.target.value
let selected = this.state.selected
if (selected.includes(item)) {
return null
} else {
selected.push({ item })
this.setState({ selected: item })
}
}
render() {
const items = [ item1, item2, item3,... ]
return(
.....
<select
multiple={true}
value={this.state.value}
onChange={this.handleChange}>
{items.map(item => (
<option
key={item}
value={item}>
{item}
</option>
))}
</select>
<div className="box">
</div>
通过做这个,
selected.push({ item })
您实际上是将对象推送到数组,这应该只是
selected.push( item ) //push item directly
您还错误地设置了状态,
this.setState({ selected: item })
你应该只有,
this.setState({ selected })
最后你可以像这样迭代选定的数组,
<div className="box">
{ this.state.selected && this.state.selected.length > 0 && this.state.selected.map(selected=> <button key={selected}>{selected}</button>)
}
</div>
您可以使用与select
相同的方法。
例如:
<div className="box">
{
this.state.selected.map(item => (
<Button ...>
))
}
</div>
const items = [ {item1:item1, isSelected: false}, {item2, isSelected: false},... ]
当项目选择时 - 将 isSelected 切换为 true,如果项目 object.isSelected === true,则制作一些按钮
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.