从 React 中循环生成的下拉菜单中获取选定值

Question

我想知道创建多个下拉菜单 (<select>) 的正确方法是什么，然后我可以在循环中 access他们通过一个按钮选择的值。我试图重新创建我目前在我的代码中拥有的内容，所以我希望这就足够了。

（我将 <select> 元素放在数组中的原因是因为我使用不同的数组在我的原始代码中生成带有行的 table。）

当前 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

这是一个有效的 codesandbox。

请注意，您可以直接从函数 return 标记而无需先存储在状态中，这就是我对 populateRows 所做的。

每个下拉列表的值应映射到状态中数组的特定索引（或其他一些类似的数据结构以存储多个值）。这会将给定下拉列表的值映射到数组中的特定项目：value={this.state.values[index]}

React 中 map 函数中的

HTML 元素必须具有唯一的 key 属性，以便 React 可以正确地看到渲染之间发生的变化（实际上还有更多，但它是另一个话题）。在我的例子中，我选择索引只是为了示例，但您可以 google 了解如何正确选择唯一键（而不是使用一些已知的 ID）。

最初状态中的数组是空的，所以你得到 [] 作为底部的字符串化值。当您更改下拉列表中的值时，数组将为 filled/modified.

我希望这对您有所帮助，当然，如果有任何不清楚的地方，请询问。

从 React 中循环生成的下拉菜单中获取选定值

Get selected value from a loop generated drop-down-menu in React

javascript

for-loop

drop-down-menu

reactjs