SelectableList не отображается Выбранный элемент при изменении выбора

Question

У меня проблема с SelectableList. Когда я показываю список в первый раз, в списке выбирается определенный по умолчанию элемент. Но когда я нажимаю на другой элемент списка, элемент не отображается как выбранный в списке, а индекс - undefined. какие-либо предложения ?

Это пример кода моего SelectableList:

import React from 'react'; 
 
import {List, ListItem, MakeSelectable} from 'material-ui/List'; 
 
import Avatar from 'material-ui/Avatar'; 
 

 
const SelectableList = MakeSelectable(List); 
 

 
class ListExampleSelectable extends React.Component { 
 

 
    constructor() { 
 
     super(); 
 
    } 
 

 
    componentWillMount() { 
 
     this.setState({ 
 
     selectedIndex: this.props.defaultValue, 
 
     }); 
 
    } 
 

 
    handleRequestChange(event, index) { 
 
     this.setState({ 
 
     selectedIndex: index, 
 
     }); 
 
     console.log(index); 
 
    }; 
 

 
    render() { 
 
     return ( 
 
      <SelectableList value = {this.state.selectedIndex} 
 
      onClick = {this.handleRequestChange.bind(this)} > 
 
      
 
       <ListItem value="1" primaryText="Menu1" leftAvatar={<Avatar src="img1.png" />}/> 
 
       <ListItem value="2" primaryText="Menu2" leftAvatar={<Avatar src="img2.png" />}/> 
 
       <ListItem value="3" primaryText="Menu3" leftAvatar={<Avatar src="img3.png" />}/> 
 
      </SelectableList> 
 
     ); 
 
    } 
 
} 
 

 
export default ListExampleSelectable;

и я использую мой компонент, как это:

import MyList from './ExampleSelectable.jsx'; 

и внутри ящика у меня есть:

<MyList defaultValue="1"/> 

Список отображается с выбранным первым элементом, но когда я нажимаю на другой элемент, выбор не перемещается по нажатому элементу.

Answer 1

И, наконец, все отлично работает. иметь в виду эти несколько вещей, если у вас есть этот вопрос:

1- Как @ Erik-зп сказал, материал-интерфейс использует onChange вместо onClick в качестве обработчика события

2- я не был в том числе в react-tap-event-plugin поэтому события кликов не регистрируются и не обрабатываются. Поэтому установите react-tap-event-plugin. В компонентах «Материал-ui» используется плагин event-tap-event-plugin для прослушивания сенсорных/tap/clickevents. Дополнительная информация о Material-ui getting started page. Дополнительная информация о react-tap-event-pluginhere.

Использование после установки:

var injectTapEventPlugin = require("react-tap-event-plugin"); injectTapEventPlugin();

3- Чтобы избежать неопределенного значения при использовании (или печати) значения индекса нажатого элемента списка, не забудьте привязать к компоненте чтобы получить доступ в обратном вызове (подробнее об этом сообщении: React this.setState is not a function

Это окончательный код моего компонента SelectableList (ps: не учитывайте имя и метод класса. ..)

import React, {Component, PropTypes} from 'react'; 
 
import Avatar from 'material-ui/Avatar'; 
 
import {List, ListItem, MakeSelectable} from 'material-ui/List'; 
 

 
let SelectableList = MakeSelectable(List); 
 

 
export default class DashboardPage extends React.Component { 
 
     constructor(props) { 
 
      super(props); 
 
      this.state = {selectedIndex: 1}; 
 
     } 
 

 
    handleRequestChange (event, index) { 
 
     this.setState({ 
 
      selectedIndex: index 
 
     }) 
 
    } 
 

 
    render() { 
 
     return (<div>{this.renderAside()}</div>); 
 
    } 
 

 
    renderAside() { 
 
     return (
 
      <SelectableList value={this.state.selectedIndex} onChange={this.handleRequestChange.bind(this)}> 
 
       <ListItem value={1} primaryText="Menu1" leftAvatar={<Avatar src="img1.png" />}/> 
 
       <ListItem value={2} primaryText="Menu2" leftAvatar={<Avatar src="img2.png" />}/> 
 
       <ListItem value={3} primaryText="Menu3" leftAvatar={<Avatar src="img3.png" />}/> 
 
       <ListItem value={4} primaryText="Menu3" leftAvatar={<Avatar src="img4.png" />}/> 
 
      </SelectableList> 
 
     ); 
 
    } 
 
}

Answer 2

Я считаю, что материал-интерфейс использует onChange вместо onClick в качестве обработчика событий:

render() { 
     return (
     <ComposedComponent 
      value={this.state.selectedIndex} 
      onChange={this.handleRequestChange} 
     > 
      {this.props.children} 
     </ComposedComponent> 
    ); 
    } 

Итак, когда вы щелкните по нему звонит функцию - Но не проходя никаких параметров к нему. Попробуйте изменить его на onChange.