Получить ссылку на выбранный элемент с помощью MaterialUI и React - PullRequest
Новая
       16

Получить ссылку на выбранный элемент с помощью MaterialUI и React

0 голосов
/ 16 мая 2018

У меня есть этот простой код в компоненте реакции: 

render(){
    return(
        <List>
            <MenuItem onClick={this.onItemClick} key={1}>Menu item 1</MenuItem>
            <MenuItem onClick={this.onItemClick} key={2}>Menu item 2</MenuItem>
            <MenuItem onClick={this.onItemClick} key={3}>Menu item 3</MenuItem>
        </List>
    )
}

onItemClick = (event) => {
    console.log(event, event.target, event.target.key); //???
}

Когда я нажимаю на элемент списка, я хочу получить его ссылку, чтобы назначить свойство selected этого элемента.event.target дает объект <li> вместо <MenuItem> объекта, поэтому event.target.key возвращает undefined

Документы material-ui не дают никаких объясненийкак обрабатывать события к сожалению.

Что я делаю не так?

Ответы [ 3 ]

0 голосов
/ 16 мая 2018

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

<MenuItem onClick={() => this.onItemClick(1)} key={1}>Menu item 1</MenuItem>

, или написать обертку вокруг MenuItemClick как 

class ExtendedMenuItem extends React.Component {
   onClick=() => {
        this.props.onClick(this.props.id);
   }
   render(){
      const {id, children, ...others} = this.props;
      return <MenuItem onClick={this.onClick} key={id} {...others}>children</MenuItem>
   }
}

, а затем используйте его как 

<ExtendedMenuItem onClick={this.onItemClick} id={1}>Menu item 1</ExtendedMenuItem >
0 голосов
/ 16 мая 2018

event.target дает элемент li, поскольку браузер работает с DOM, а не с виртуальной структурой, которую React хранит в памяти.

На отображаемой странице нет элемента MenuItem.Вместо этого есть элементов, которые визуализируются с помощью MenuItem s.

События Click происходят от реальных элементов DOM, таких как div, input, li.Почему не из MenuItem?Потому что на странице нет <MenuItem>.Когда вы нажимаете на элементы, вы нажимаете <li> с, а не <MenuItem> с.

То, что вы хотите сделать, достижимо путем установки «воображаемого» обработчика щелчков на виртуальном <MenuItem>: 

<VirtualElement onClick={virtualClickHandler} />

Затем при рендеринге реального DOM-элемента <li> VirtualElement установит для него обработчик клика real : 

class VirtualElement {
    realClickHandler (e) { // Let's assume you've bound this in the constructor
        // do stuff with "e" and "this.props"
    }
    render () {
        return <li onClick={realClickHandler} />
    }
}

Теперь область действия realClickHandler содержит this и e.Это означает, что он может читать как состояние, так и (виртуальные) реквизиты объекта VirtualElements и , , события .

Заключительная часть - осталось толькоvirtualClickHandler.Где это находится?В this.props.Потому что, когда ранее вы говорили <VirtualElement onClick={virtualClickHandler} />, этот обработчик onClick записывается на объекте props VirtualElement.

Что вы хотите сделать, это вызвать virtualClickHandler из realClickHandler , который видит как событие , так и this объект: 

realClickHandler (e) {
    // Here you can tell the virtualClickHandler whatever it needs to know:
    this.props.onClick({
        event: e,
        key: this.props.key
    });
}
0 голосов
/ 16 мая 2018

вы можете сделать что-то подобное: 

render(){
    return(
        <List>
            <MenuItem onClick={this.onItemClick(1)} key={1}>Menu item 1</MenuItem>
            <MenuItem onClick={this.onItemClick(2)} key={2}>Menu item 2</MenuItem>
            <MenuItem onClick={this.onItemClick(3)} key={3}>Menu item 3</MenuItem>
        </List>
    )
}

onItemClick = itemId=>(event) => {
    console.log(itemId,event, event.target, event.target.key); //???
}
...