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"/>
첫 번째 항목이 선택된 상태로 목록이 표시되지만 다른 항목을 클릭하면 클릭 한 항목에서 선택 항목이 이동하지 않습니다.
마지막으로 모든 것이 잘 작동하고 있습니다. 이 문제가있는 경우 다음 몇 가지 사항에 유의하십시오.
1- @ erik-sn이 말했듯이 material-ui는 onChange대신 onClick이벤트 처리기로 사용 합니다.
2- react-tap-event-plugin클릭 이벤트가 등록 및 처리되지 않은 이유를 포함 하지 않았습니다. 따라서 react-tap-event-plugin. Material-ui 구성 요소는 react-tap-event-plugin을 사용하여 터치 / 탭 / 클릭 이벤트를 수신합니다. Material-ui 시작하기 페이지 에 대한 자세한 정보 . react-tap-event-plugin 여기 에 대한 자세한 정보 .
설치 후 사용 :
var injectTapEventPlugin = require("react-tap-event-plugin"); injectTapEventPlugin();
3- 클릭 한 목록 항목의 인덱스 값을 사용 (또는 인쇄) 할 때 정의되지 않은 값을 방지하려면 콜백에 액세스 할 수 있도록 구성 요소에 바인딩하는 것을 잊지 마십시오 ( 이 게시물에 대한 자세한 내용은 다음과 같습니다. React this.setState is not 기능
이것은 내 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>
);
}
}이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다