反應：渲染狀態數組

Question

我正在使用 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>

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>

演示

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，則制作一些按鈕