Рендеринг нескольких строк для каждого выпадающего элемента в React - PullRequest
Новая
       6

Рендеринг нескольких строк для каждого выпадающего элемента в React

0 голосов
/ 28 октября 2019

Как я могу отобразить несколько строк для каждого элемента в раскрывающемся списке. Пример: мне нужно отобразить адрес1 в первой строке и город, состояние во второй строке для каждого элемента в раскрывающемся списке. \ n и \ br не работает. Любая помощь будет оценена. 

React.render(
    <Dropdown label="Dropdown Label">
      <DropdownItem label="1 main street \n  sacramento, california" value="Number 1" />
      <DropdownItem label="2 main street \n  stockton, california" value="2" />
    </Dropdown>,
  document.getElementById('app')
);

Ответы [ 3 ]

1 голос
/ 28 октября 2019

Если у вас есть раскрывающийся список, подобный следующему: 

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

В большинстве случаев этот раскрывающийся список будет динамическим, его лучше сохранить в массиве, а затем использовать функцию более высокого порядка javascript для отображенияповерх него 

const optionsList = [
   {
      name: 'Volvo',
      value: 'volvo',
   },
   {
     name: 'Saab',
     value: 'saab',
   },
  // And the no of drop down items could be dynamic
];

// Now in your render method
React.render(
    <select onChange={onChangeFunction}>
    {optionsList.map(option => (
      <option value={option.value} key={option.name}>{option.name}</option>
    ))}
    </select>,
  document.getElementById('app')
);

// In this way your dropdown will appear as a dropdown list on the newline without using breaks or newlines

PS Не забудьте пропустить ключ при отображении параметров. React поблагодарит вас;)

И теперь у вас есть все возможности для выбора этого пользовательского компонента, предоставив ему стили по вашему выбору.

1 голос
/ 28 октября 2019

Вы можете использовать функцию JavaScript Map в JavaScript. Вы можете иметь названия городов в виде массива и указывать их индекс положения в качестве ключа, а название города - в качестве значения. Дополнительную информацию можно найти в документации React , а пример можно увидеть здесь . Пример ниже: 

  function Filter(props){
  const Items = ['All', 'Car', 'Truck', 'Convetible'];
  const MappingItems = Items.map((Item) => <option>{Item}</option> );
  return (
    <div style={divStyle}>
      New Only <input type="checkbox" /><br /><br />
      Select Type <select>
        {MappingItems}
      </select>
    </div>
  )
}

ReactDOM.render(
  <Filter />,
  document.getElementById('root')
);

Надеюсь, это поможет!

0 голосов
/ 28 октября 2019

здесь, согласно вашему требованию: 

import React from "react";
import ReactDOM from "react-dom";
const DropdownItem = props => {
  return (
    <option label={props.value} value={props.label}>
      {props.value}
    </option>
  );
};

class Dropdown extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: ""
    };
  }

  handleChange = e => {
    this.setState({ value: String(e.target.value) });
  };
  render() {
    return (
      <>
        <select value={this.state.value} onChange={this.handleChange}>
          {this.props.children.map(DropdownItem => {
            return DropdownItem;
          })}
        </select>
        <div>
          {this.state.value.split("\\n").map((item, i) => {
            return <p key={i}>{item}</p>;
          })}
        </div>
      </>
    );
  }
}

ReactDOM.render(
  <Dropdown label="Dropdown Label">
    <DropdownItem
      label="1 main street \n sacramento, california"
      value="Number 1"
    />
    <DropdownItem
      label="2 main street \n stockton, california"
      value="Number 2"
    />
  </Dropdown>,
  document.getElementById("app")
);

https://codesandbox.io/s/react-hooks-counter-demo-vjocy

...