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

function that returns a select with options, using React

本文关键字：选项 选择 返回 使用 React 函数      更新时间：2023-09-26

我有一个包含id和一个name的法院JSON。JSON包含无限数量的法院。我需要创建一个充满<Option> <Select>.<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 填充值的选项。

您可能想阅读为什么选择值？ 在文档中

我不清楚为什么当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 。

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

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

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

render: function() {
  return (
    <SomeParentElement>
      {options}
    </SomeParentElement>
  );
}
相关文章：