Question

我正在用React制作一个搜索表单，其中包括一个多重选择标签，该标签将选定的选项添加到一个数组中。

如何将选定的项目作为可移动按钮成功呈现到box 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>

Answer 1

这样做，

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>

Demo

Answer 2

您可以使用与select相同的方法。

例如：

<div className="box">
   { 
     this.state.selected.map(item => (
        <Button ...>
     ))
   }
</div>

Answer 3

将商品设为对象

const items = [ {item1:item1, isSelected: false}, {item2, isSelected: false},... ]

当选择项目时-将isSelected切换为true，如果项目为object.isSelected === true，则进行一些按钮

React：渲染状态数组

3 个答案:

将商品设为对象