從 React 中循環生成的下拉菜單中獲取選定的值

Question

我想知道使用循環創建多個下拉菜單（ <select> ）的正確方法是什么，然后我可以在其中通過按鈕訪問它們選擇的值。 我試圖重新創建我目前在我的代碼中擁有的內容，所以我希望這已經足夠了。

（我將<select>元素放在數組中的原因是因為我使用不同的 arrays 在原始代碼中生成包含行的表。）

目前getValue() ，即試圖從第一個下拉菜單中獲取值，打印''這是初始值，即使我從菜單中更改值也是如此。 我認為問題在於將它們放入數組中會導致它們在更改時不會更新自己的值。 有沒有辦法解決這個問題？

此代碼還導致this.state.value僅在最后更改的下拉菜單上設置。 我理解為什么會發生這種情況，但我不知道如何解決它。

interface Props extends PanelProps<Options> {}

export class TablePanel extends Component<Props,{value: string, staterows:JSX.Element[]}> {
  constructor(props: Props) {
    super(props);
    this.handleUniqueSelect = this.handleUniqueSelect.bind(this)
    this.state = {value: '', staterows:[] }
  }

  handleUniqueSelect(val:any){
     this.setState({value: val.currentTarget.value})    
  }

  populateRows(){
     let rows:any = []
     for(let index = 0; index < 10; index++) {
        rows.push(<select value={this.state.value} onChange={this.handleUniqueSelect }>
                        <option value="volvo">Volvo</option>
                        <option value="saab">Saab</option>
                        <option value="mercedes">Mercedes</option>
                        <option value="audi">Audi</option>
                     </select>
                 );
     }
     this.setState({staterows: rows})    
  } 



 getValue(){
   if(this.state.staterows.length === 0)
    this.populateRows()
   console.log(this.state.staterows[0].props.value);
 }

 render(){
  
    return (
           <div>
            {this.state.staterows}     
             <button type='button' onClick={e=>this.getValue()} >Button</button>
           </div>   
          );
  }
}

我在Sandbox中添加了示例。 我更改了console.log(this.state.staterows[0].props.value); 到console.log(this.state.staterows[0]); 因為它在查找未知類型的屬性時遇到了問題。

Answer 1

這是一個有效的代碼框。

請注意，您可以直接從 function 返回標記，而無需先存儲在 state 中，這就是我對populateRows所做的。

每個下拉列表的值應映射到 state 中數組的特定索引（或其他類似的數據結構以存儲多個值）。 這會將給定下拉列表的值映射到數組中的特定項目： value={this.state.values[index]}

map function 中的 map 元素中的map元素必須具有唯一的key屬性，以便 React 可以正確地看到渲染之間發生的變化（實際上還有其他主題）。 在我的例子中，我只是為示例選擇了索引，但您可以通過谷歌搜索並查看如何正確選擇唯一鍵（而不是使用一些已知的 ID）。

最初，state 中的數組是空的，因此底部的字符串值得到[] 。 當您更改下拉列表中的值時，數組將被填充/修改。

我希望這會有所幫助，當然，請問是否有不清楚的地方。