React bootstrap：如何將數組傳遞給 Form.Control 中的選項

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

呈現元素動態列表的標准方法是 map 一個數組：

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) =>...的索引作為開發時的后備（這也是它在您使用時使用的默認值）不提供一個）。

Answer 2

React 文檔有一個關於列表和鍵的部分，可以幫助你解決這個問題。 我為您提供了一個示例：

const myArray = ["Moo Moo", "Burt", "Little Kitty", "Juan"]

  const options = myArray.map((item) => {
    return (
      <option key={item} value={item}>
        {item}
      </option>
    )
  })

return (
    <Container>
      <Row>
        <Col>
          <Form>
            <Form.Group controlId="exampleForm.SelectCustom">
              <Form.Label>Custom select</Form.Label>
              <Form.Control as="select" custom>
                {options}
              </Form.Control>
            </Form.Group>
          </Form>
        </Col>
      </Row>
    </Container>
  )

如果它是array類型，那么映射{item.value}將不起作用，因為數組中沒有鍵/值對，只有值。