Блог

Итак, у меня есть функция рендеринга react, которая будет отображать всплывающее меню. Пользователь должен иметь возможность выбирать из выпадающего меню внутри всплывающего окна. Поскольку список элементов, которые необходимо выбрать, слишком длинный, невозможно ввести их вручную (кроме того, поддержание обновленной версии будет проблематичным). Я подумываю о том, чтобы зачитать их по списку, но, похоже, мне не повезло. Кто-нибудь может посоветовать мне, как это сделать?

 render(){
//entities is obviously a long list
var entities=["a","b","c",...];
 return(
 <div id="someid">
    <Input type="select" onChange={this.props.filterSelect}>
     {entities.map(e=><option>e</option>)}
    </Input>

 </div>
 );
  

Проблема в том, что в выпадающем меню я не получаю конкретные объекты, а получаю только букву «е».Я действительно думаю, что проблема связана с областью действия функции arrow и с тем, как область действия каждого элемента (e) в обратном вызове не достигает

 <option></option> 
  

теги, к сожалению, я не знаю, как решить эту проблему. Есть какие-нибудь идеи?

Это должно исправить:

 render(){
var entities=["a","b","c"];
 return(
 <div id="someid">
    <Input type="select" onChange={this.props.filterSelect}>
     {entities.map(e=><option key={e}>{e}</option>)}
    </Input>

 </div>
 );
  

 render(){
    //entities is obviously a long list
    var entities = ["a", "b", "c", ...];
    return (
        <div id= "someid" >
            <Input type="select" onChange = { this.props.filterSelect } >
                {
                    entities.map(e => <option>{ e } < /option>)
                }
            < /Input>
        < /div>
    )
}
  

Я думаю, что ваша проблема просто в том, что вам не хватает {} вокруг вашей переменной, поэтому попробуйте {entities.map(e=><option>{e}</option>)} вместо этого.