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?

我不清楚为什么在完全找到Form.Field元素来表达您的需求时，您创建了select抽象

<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。

Answer 2

使用map创建jsx元素。尝试：

var options = this.state.courthouseData.map(function(courthouse) {
   return (
     <option value={courthouse.i}>{courthouse.name}</option>
   );
});

我不确定调用此函数的位置，但是，您可能希望在渲染函数中返回输出：

render: function() {
  return (
    <SomeParentElement>
      {options}
    </SomeParentElement>
  );
}

使用React返回带选项的select的函数

2 个答案: