Как добавить новую строку в текстовое поле раскрывающегося списка в semantic-ui реагировать? - PullRequest
Новая
       31

Как добавить новую строку в текстовое поле раскрывающегося списка в semantic-ui реагировать?

0 голосов
/ 02 мая 2018

Вот функция визуализации 

render(){
    const { members, user } = this.props;
    let memberOptions = [];
    members.forEach((member, i) => {
      memberOptions.push({
        key: i,
        text: member.user.name,
        value: member.user.id,
        image: { avatar: true, src: member.user.gravatar },
      });
    });
    return (
      <Dropdown placeholder='Select User' fluid selection options={memberOptions} />
    )
  }

Это сделает отлично. Но я также хочу добавить еще один текст (скажем, по электронной почте) в это текстовое поле в новой строке . Таким образом, выпадающие элементы выглядят примерно так: https://react.semantic -ui.com / elements / list # list-example-relaxed

Как мне этого добиться?

1 Ответ

0 голосов
/ 23 мая 2018

Akhila , я бы порекомендовал вам использовать content prop вместо text prop для вашего Dropdown.Item, который вы визуализируете из массива memberOptions. Реквизит text определенно ожидает строку. content опора будет принимать все, включая другие компоненты или узлы React. Таким образом, вместо того, чтобы возвращать text в виде строки, вы можете сделать что-то подобное для контента, возможно, как отдельный метод класса для вашего компонента: 

const renderItemContent = (member) => {
  const {
    email,
    name,
  } = member.user;

  const emailStyle = {
    color    : '#333',
    fontSize : '.875em',
  }

  return(
    <React.Fragment>
      {name}
      {email &&
        <div style={emailStyle}>{email}</div>
      }
    </React.Fragment>
  )
}

Затем установите content: this.renderItemContent(member) на свой элемент memberOptionsArray.

...