react-bootstrap을 사용하여 다이내믹드롭다운리스트를 작성하려면 어떻게 해야 하나요?

react-bootstrap을 사용하여 다이내믹드롭다운리스트를 작성하려면 어떻게 해야 하나요?

react-bootstrap 사이트의 예제 코드는 다음을 나타냅니다.어레이를 사용하여 옵션을 구동해야 하는데 컴파일할 예를 찾을 수 없습니다.

<Input type="select" label="Multiple Select" multiple>
  <option value="select">select (multiple)</option>
  <option value="other">...</option>
</Input>

이 두 가지 기능으로 시작할 수 있습니다.첫 번째는 페이지에 전달된 소품을 기반으로 선택 옵션을 동적으로 작성합니다.이러한 항목이 상태에 매핑되어 있는 경우 선택 항목이 자동으로 다시 생성됩니다.

 createSelectItems() {
     let items = [];         
     for (let i = 0; i <= this.props.maxValue; i++) {             
          items.push(<option key={i} value={i}>{i}</option>);   
          //here I will be creating my options dynamically based on
          //what props are currently passed to the parent component
     }
     return items;
 }  

onDropdownSelected(e) {
    console.log("THE VAL", e.target.value);
    //here you will see the current selected value of the select input
}

그러면 이 코드 블록이 렌더링 안에 있습니다.함수 참조를 onChange 소품으로 전달하면 onChange가 호출될 때마다 선택한 개체가 해당 함수와 자동으로 바인딩됩니다.또한 수동으로 옵션을 작성하는 대신 createSelectItems() 함수를 호출하여 몇 가지 제약조건(변경 가능)에 따라 옵션을 빌드하고 반환합니다.

  <Input type="select" onChange={this.onDropdownSelected} label="Multiple Select" multiple>
       {this.createSelectItems()}
  </Input>

작업 예

this.countryData = [
    { value: 'USA', name: 'USA' },
    { value: 'CANADA', name: 'CANADA' }            
];

<select name="country" value={this.state.data.country}>
    {this.countryData.map((e, key) => {
        return <option key={key} value={e.value}>{e.name}</option>;
    })}
</select>

화살표 기능을 사용하여 동적 드롭을 바인드합니다.

class BindDropDown extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      values: [
        { name: 'One', id: 1 },
        { name: 'Two', id: 2 },
        { name: 'Three', id: 3 },
        { name: 'four', id: 4 }
      ]
    };
  }
  render() {
    let optionTemplate = this.state.values.map(v => (
      <option value={v.id}>{v.name}</option>
    ));

    return (
      <label>
        Pick your favorite Number:
        <select value={this.state.value} onChange={this.handleChange}>
          {optionTemplate}
        </select>
      </label>
    );
  }
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root">
    <!-- This element's contents will be replaced with your component. -->
</div>

// on component load, load this list of values
// or we can get this details from api call also    
const animalsList = [
{
    id: 1,
    value: 'Tiger'
}, {
    id: 2,
    value: 'Lion'
}, {
    id: 3,
    value: 'Dog'
}, {
    id: 4,
    value: 'Cat'
}
];

// generage select dropdown option list dynamically
function Options({ options }) {
    return (
        options.map(option => 
                    <option key={option.id} value={option.value}>                                   
                    {option.value}
                    </option>)
                   );
}

<select
name="animal"
className="form-control">
<Options options={animalsList} />
</select>

기본적으로 필요한 것은 어레이를 매핑하는 것입니다.그러면 다음 목록이 반환됩니다.<option>렌더링할 양식 내부에 배치할 수 있습니다.

array.map((element, index) => <option key={index}>{element}</option>)

완전한 기능 컴포넌트를 렌더링합니다.<option>s는 컴포넌트 상태에 저장되어 있습니다. Multiple여러 요소를 클릭해서 선택할 수 있습니다.드롭다운 메뉴를 원하는 경우 삭제합니다.

import React, { useState } from "react";

const ExampleComponent = () => {
    const [options, setOptions] = useState(["option 1", "option 2", "option 3"]);

    return (
        <form>
            <select multiple>
            { options.map((element, index) => <option key={index}>{element}</option>) }
            </select>
            <button>Add</button>
        </form>
    );
}

다중 선택 컴포넌트

작업 예: https://codesandbox.io/s/blue-moon-rt6k6?file=/src/App.js

1개의 라이너는 다음과 같습니다.

import * as YourTypes from 'Constants/YourTypes';
....
<Input ...>
    {Object.keys(YourTypes).map((t,i) => <option key={i} value={t}>{t}</option>)}
</Input>

목록 상수를 별도의 파일에 저장한다고 가정합니다(웹 서비스에서 다운로드하지 않는 한 저장해야 합니다).

# YourTypes.js
export const MY_TYPE_1="My Type 1"
....

매핑을 위한 키를 추가해야 합니다.그렇지 않으면 각 소품에는 고유한 키가 있어야 하므로 경고가 발생합니다.아래 코드 개정:

let optionTemplate = this.state.values.map(
    (v, index) => (<option key={index} value={v.id}>{v.name}</option>)
);

map()을 사용하여 다이내믹 선택 옵션을 만들 수 있습니다.

코드 예시

return (
    <select className="form-control"
            value={this.state.value}
            onChange={event => this.setState({selectedMsgTemplate: event.target.value})}>
        {
            templates.map(msgTemplate => {
                return (
                    <option key={msgTemplate.id} value={msgTemplate.text}>
                        Select one...
                    </option>
                )
            })
        }
    </select>
)
  </label>
);

자동 검색을 사용하여 이 작업을 수행할 수 있습니다.간단한 시나리오로 보기엔 좀 길어 보이지만 누군가에게 도움이 될 것 같아 글을 올렸습니다.

먼저 컴포넌트를 생성하여 재사용할 수 있도록 합니다.

interface DynamicSelectProps {
    readonly id: string
    readonly options: any[]
    readonly defaultValue: string | null
    readonly disabled: boolean
    onSelectItem(item: any): any
    children?:React.ReactNode
}

export default function DynamicSelect({id, options, defaultValue, onSelectItem, disabled}: DynamicSelectProps) {

    const [selection, setSelection] = useState<any[]>([]);

    return <>
        <Typeahead
            labelKey={option => `${option.key}`}
            id={id}
            onChange={selected => {
                setSelection(selected)
                onSelectItem(selected)
            }}
            options={options}
            defaultInputValue={defaultValue || ""}
            placeholder="Search"
            selected={selection}
            disabled={disabled}
        />
    </>
}

콜백 함수

function onSelection(selection: any) {
    console.log(selection)
    //handle selection
}

사용.

<div className="form-group">
    <DynamicSelect
        options={array.map(item => <option key={item} value={item}>{item}</option>)}
        id="search-typeahead"
        defaultValue={<default-value>}
        disabled={false}
        onSelectItem={onSelection}>
    </DynamicSelect>
</div>

언급URL : https://stackoverflow.com/questions/36205673/how-do-i-create-a-dynamic-drop-down-list-with-react-bootstrap