В панели свертывания все элементы одновременно реагируют на нажатие - PullRequest
Новая
       8

В панели свертывания все элементы одновременно реагируют на нажатие

0 голосов
/ 09 июня 2018

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

Как сделать так, чтобы это событие прослушивало только элемент, на который я нажимаю?

Для простоты я сократил свой объект до 3 элементов, но на самом деле мой файл json большой и по этой причине яиспользуйте метод карты 

// my profiles.json
let profiles = [{"name":"John", "count": 2}, {"name":"Kitty", "count": 3}, {"name":"Ji", "count": 4}]

class Main extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: this.props.profiles,
      open: false,
      expand: 'close'
    }
  }
  
  handleClick() {
    if (this.state.open) {
      this.setState({ open: false, expand: 'close' })
    } else {
      this.setState({ open: true, expand: 'open' })
    }
  }
  
  render() {
    let { data } = this.state
    const listItem = data.map((profile, index) => {
      return (
        <div key={index} >
          <div className='profile-title' onClick={() => this.handleClick()}>
            <span className='name'>{profile.name}</span> 
          </div>
          <div className={`profile-content ${this.state.expand}`}>
            <span className='number'>{profile.count}</span>
          </div>
        </div>
      )
    })
    return (
      <div className='content'>
          { listItem }
      </div>
    )
  } 
}


const App = () => (
  <div><Main profiles={profiles} /></div>
)

ReactDOM.render(
  <App />,
  document.getElementById('root')
)
.close {
  overflow: hidden;
  height: 0;
}
.open {
  height: auto;
  padding: 10px;
}

.profile-title{
  border: 1px solid;
  padding: 10px;
}
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>

1 Ответ

0 голосов
/ 09 июня 2018

В дополнение к тому, что сказал Самуэль Квак, вам следует подумать об использовании библиотеки компонентов для таких вещей.

Например, мне лично нравится BlueprintJS , которая предоставляет компонент под названием Collapse: 

export class CollapseExample extends React.Component<{}, ICollapseExampleState> {
public state = {
    isOpen: false,
};
 
public render() {
    return (
        
            
            
                
                    Dummy text.
);} private handleClick = () => {this.setState ({isOpen:! this.state.isOpen});}} Скопировано с здесь

Еще один замечательный Компонент предоставляется Material-UI.Демоверсию можно найти здесь .

...