javascript - 使用 React 返回带有选项的选择的函数

Question

我有一个法院的 JSON，其中包含一个 id和一个name . JSON 包含无限数量的法院。我需要创建一个 <Select>满满的<Option> . <Option>值将是 id，<Option>内容将是名称。

所以我得到了这个函数

createSelectCourtHouse:function(){
    return ( 
    <Form.Field className='form-control' type='select' name='request.courthouse_id' id='accused_lastname' placeholder="Nom de l'accusé" id='accused_lastname' onChange={this.handleChange.bind(this, 'accused_lastname')}>
       this.state.courthouseData.forEach(function(courthouse) {
           return (
               <option value={courthouse.i}>{courthouse.name}</option>
           );
       })
    </Form.Field>)
},

但似乎我不能在返回中执行 forEach。所以我尝试了这种方式:

var field = ( 
      <Form.Field className='form-control' type='select' name='request.courthouse_id' id='accused_lastname' placeholder="Nom de l'accusé" id='accused_lastname' onChange={this.handleChange.bind(this, 'accused_lastname')}>
         this.state.courthouseData.forEach(function(courthouse) {
              <option value={courthouse.id}>{courthouse.name}</option>
          });
      </Form.Field>
    )
return field;

但它不起作用。我觉得我快要得到答案了，但就是无法得到答案。有什么想法吗？

TL;DR:我需要创建一个带有选项的选择，其中填充了来自 JSON 的值。

Answer 1

您可能想阅读 Why Select Value?在文档中

当 select 元素完美地表达您的需求时，我不清楚为什么您创建了 Form.Field 抽象

<select className="form-control" name="request.courthouse_id">
  {this.state.courthouseData.map((courthouse, i) => (
    <option key={i} value={courthouse.id}>{courthouse.name}</option>
  ))}
</select>

这具有能够将 value 属性传递给 select 元素的额外好处，该元素将正确显示默认/选择的 option .