javascript - react 引导 : How to pass an array to options in Form. 控制

Question

我正在使用 Form.Control 创建一个下拉列表，我想使该列表动态化。我的代码如下所示:

render() {
 return (

 <Form.Control as="select" value={this.state.inputval} onChange={this.updateinputval}>
  <option value={myArray[0].value}> myArray[0].value </option>
  <option value={myArray[1].value}> myArray[1].value </option>
 </Form.Control>

 )
}

显然，这仅在 myArray 有两个元素时有效。我想找到一种方法将 myArray 动态传递到“Form.Control”的 options 中。我在这里找到了关于如何使用 Select 进行操作的答案，但它似乎不适用于 Form.Control as ="select" 我在这里。

谢谢

Answer 1

呈现动态元素列表的标准方法是映射一个数组:

render() {
 return (
 <Form.Control as="select" value={this.state.inputval} onChange={this.updateinputval}>
  {myArray.map(opt => (
    <option value={opt.value}>{opt.value}</option>
  ))}
 </Form.Control>
 )
}

React 会要求您为映射元素提供唯一的 key Prop 。理想情况下，这应该是一个随机 id 字符串，但您可以添加映射数组的索引 myArray.map((opt, i) => ... 作为开发时的后备(这也是当您不提供时它使用的默认值)。