1

var CONTACTS = [
            {
                id: 1,
                name: 'Darth Vader',
                phoneNumber: '+250966666666',
                image: 'http://cs7.pikabu.ru/images/big_size_comm_an/2014-03_7/13962622876915.gif',
                mail: 'testmail.ru'
            }, {
                id: 2,
                name: 'Princess Leia',
                phoneNumber: '+250966344466',
                image: 'http://images6.fanpop.com/image/photos/33100000/CARRIE-FISHER-anakin-vader-and-princess-leia-33186069-190-149.gif'
            }, {
                id: 3,
                name: 'Luke Skywalker',
                phoneNumber: '+250976654433',
                image: 'http://www.youshouldshare.me/wp-content/uploads/2015/03/14264215682890-anigif_enhanced-buzz-13518-1367608452-4.gif'
            }, {
                id: 4,
                name: 'Chewbacca',
                phoneNumber: '+250456784935',
                image: 'https://media.giphy.com/media/RUUdVZqwpfTRS/giphy.gif'
            }
        ];
var Contact = React.createClass({
  render: function(){
    return <li >
                <img src={this.props.image} />
                <div onClick={this.ClickFun} >{this.props.name}</div>
                <div>{this.props.phoneNumber}</div>
           </li>;
  }
});
var Contactlist = React.createClass({
  getInitialState:function(){
    return {
      displayedContacts:CONTACTS
    };
  },
  Handler: function(event){
    var QuerySearch = event.target.value.toLowerCase();
      var displayedContacts = CONTACTS.filter(function(el){
          var searchValue = el.name.toLowerCase();
          return searchValue.indexOf(QuerySearch) !==-1;
      });
      this.setState({
        displayedContacts:displayedContacts
      });
  },
    render: function(){
      return (
        <div>
        <input className="Search" placeholder="Search Man" onChange={this.Handler} />
        <ul>
          {
            this.state.displayedContacts.map(function (el) {
              return <Contact key={el.id}
                              name={el.name}
                              phoneNumber={el.phoneNumber}
                              image={el.image} />;
            })
          }
        </ul>
        </div>
      )
    }
});

ReactDOM.render(<Contactlist />,document.getElementById('content'));
body{
    background-color: #008080;
    font-family: sans-serif;
    text-align: center;
    color: #fff;
}
#content{
    width: 400px;
    height: 500px;
    background-color: #20B2AA;
    display: block;
    margin: 0 auto;
   box-shadow: 15px 15px 20px black;
    padding: 10px;
}
input{
    width: 360px;
    padding: 10px;
    border: 1px solid black;
}
input:focus,
input:hover{
 border: 1px solid green;
}
h1{
    margin: 20px;
    padding: 0;
    font-size: 30px;
    text-transform: uppercase;
}
img{
  width: 60px;
  height: 60px;
  border-radius: 50%;
}
ul li{
  list-style: none;
  border-bottom: 1px solid grey;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='content'>

    </div>

Как сделать чтоб при клике на контакт, он разворачивался (увеличиваться в высоте) и должна отображаться какая-то дополнительная информация о контакте (например, адрес и email). При повторном клике, информация должна сворачиваться.

1 ответ 1

1

Добавьте контакту state opened:false, и меняйте его по клику, привяжите к этому изменение стилей и, собственно, все. Например, вот так:

var Contact = React.createClass({

    state:{
       opened: false
    }

    handleClick: function(){
      this.state.opened ? this.setState({opened: flase}) : this.setState({opened: true});
    }

  render: function(){
    return <li onClick={this.handleClick.bind(this)}>
      <img src={this.props.image} />
         <div onClick={this.ClickFun} >{this.props.name}</div>
         <div>{this.props.phoneNumber}</div>
         <div className={(this.state.opened ? '' : 'hidden')}>{this.props.mail}</div>
         <div className={(this.state.opened ? '' : 'hidden')}>{this.props.adress}</div>
      </li>;
  }
});

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.