React bootstrap:如何在Form.Control中传递一个数组给options

Question

我使用的是Form。控件来创建下拉列表，我想使该列表动态。我的代码是这样的:

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进入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) => ...的索引作为回退(这也是当您不提供时它使用的默认值)。

Answer 2

React文档中有一个list &能帮你解决这个问题的钥匙。我已经为您提供了一个示例:

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}将不起作用，因为数组中没有键/值对，只有值。