从 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 中的数组是空的，因此底部的字符串值得到[] 。 当您更改下拉列表中的值时，数组将被填充/修改。

我希望这会有所帮助，当然，请问是否有不清楚的地方。