根据值在react-select中的选项旁边添加一些文本

Question

我正在使用react-select，并且需要根据某些条件像在“默认类别”中那样添加文本。有什么办法做到这一点？

我的代码：

renderCategories(categories) {
   const temp = [];
   categories.forEach((key) => {
        temp.push({label: key.name, value: key.id.toString()});
   });
   return temp;
}

<Field
 name="event_category"
 component={renderSelectField}
 placeholder="Select Event Category"
 options={this.renderCategories(categories)}
/>

其中renderSelectField是react-select的Select组件，使用redux-form，category是包含id和name的对象数组。

Answer 1

您可以通过提供自己的自定义Option模板来进行反应选择来做到这一点。有点像：

const OptionLayout = props => {
  const { innerProps, innerRef } = props;
  return (
    <article ref={innerRef} {...innerProps} className={'custom-option'}>
      <h4>{props.data.artist}</h4>
      <div className={'sub'}>{props.data.title} </div>
    </article>
  );
};

<Select {...selectProps} components={{Option: OptionLayout}} />

这与您的布局不符，但应为您提供创建自己的自定义Option模板所需的条件。