Как получать значение всех event в консоле когда забиваешь input?

Question

[hollanditkzn]

Не могу понять, у меня почему -то всегда target пишет null в react https://codepen.io/rusline/pen/LOBoYg?editors=0010

let CONTACTS = [
  {
    id:1,
    name: 'Kamila Abcentova',
    phoneNumber: '[phone]',
    image: 'https://i.pinimg.com/736x/63/57/fa/6357fa6703775b165e739a1c6a1d0899--berges-portrait-paintings.jpg'
  },
  {
    id:2,
    name: 'Denis Abramov',
    phoneNumber: '[phone]',
    image: 'https://pbs.twimg.com/media/BvVsFVBCcAAT_Pt.jpg:large'
  },
  {
    id:3,
    name: 'Kristian Sendler',
    phoneNumber: '[phone]',
    image: 'https://thairomances.com/userfiles/ProfilePhoto/14244/39093-full_size.jpg?v=3'
  },
  {
    id:4,
    name: 'Marat Kizombov',
    phoneNumber: '[phone]',
    image: 'http://funstories.lol/wp-content/uploads/2016/07/2-121-768x768.jpg'
  }
];

class Contact extends React.Component{
  render(){
    return <li className='contact'>
      <img className='contact-image' src={this.props.image} width='60px' height='60px'/>
      <div className='contact-info'>
        <div className='contact-name'>{this.props.name}</div>
        <div className='contact-phone'>{this.props.phoneNumber}</div>
      </div>
    </li>
  }
}

class ContactList extends React.Component{
  constructor(props){
    super(props);
    this.handleSearch = this.handleSearch.bind(this);
  }
  
  handleSearch(event){
    console.log(event)
  }
  render(){
      return(
        <div className='contacts'>
          <input type='text' className='search-fields' onChange={this.handleSearch}/>
          <ul className='contacts-list'>
            {
              CONTACTS.map(function(el){
                return <Contact 
                         key={el.id}
                         name={el.name}
                         phoneNumber={el.phoneNumber}
                         image={el.image}
                         />;
              })
            }
          </ul>
        </div>
      );
    }
}

ReactDOM.render(
  <ContactList/>,
  document.getElementById('root')
)

Comments

[Роман Александрович]

в каком месте кода?

[hollanditkzn]

Роман Александрович, обновил код. Просто думал песочница в самый раз для примера

[Роман Александрович]

hollanditkzn, Опишите подробнее что вам надо сделать?

[hollanditkzn]

Роман Александрович, Когда что-то пишу в input для поиска я хочу видеть все что творится с event чтобы. Просто я смотрю в консоль и он пустой. Это нормально или нет? Просто потом к каким методам могу обращаться и что они в себя хранят

[Роман Александрович]

hollanditkzn,

handleSearch(el){
    console.log(el.target.value)
  }

папробуйте так и скажи что у вас выдает консоль

[hollanditkzn]

Роман Александрович, То то я ввожу в input

[hollanditkzn]

Роман Александрович, А отдельно его нельзя вывести? просто объект event? Просто там target null указывается

[Роман Александрович]

hollanditkzn,

let CONTACTS = [
  {
    id:1,
    name: 'Kamila Abcentova',
    phoneNumber: '[phone]',
    image: 'https://i.pinimg.com/736x/63/57/fa/6357fa6703775b165e739a1c6a1d0899--berges-portrait-paintings.jpg'
  },
  {
    id:2,
    name: 'Denis Abramov',
    phoneNumber: '[phone]',
    image: 'https://pbs.twimg.com/media/BvVsFVBCcAAT_Pt.jpg:large'
  },
  {
    id:3,
    name: 'Kristian Sendler',
    phoneNumber: '[phone]',
    image: 'https://thairomances.com/userfiles/ProfilePhoto/14244/39093-full_size.jpg?v=3'
  },
  {
    id:4,
    name: 'Marat Kizombov',
    phoneNumber: '[phone]',
    image: 'http://funstories.lol/wp-content/uploads/2016/07/2-121-768x768.jpg'
  }
];

class Contact extends React.Component{
  render(){
    return <li className='contact'>
      <img className='contact-image' src={this.props.image} width='60px' height='60px'/>
      <div className='contact-info'>
        <div className='contact-name'>{this.props.name}</div>
        <div className='contact-phone'>{this.props.phoneNumber}</div>
      </div>
    </li>
  }
}

class ContactList extends React.Component{
  constructor(props){
    super(props);
this.state={
input=""
}
    this.handleSearch = this.handleSearch.bind(this);

  }
  
  handleSearch(el){
    console.log(el.target.value)
this.setState({
input:el.target.value
})
  }
  render(){
      return(
        <div className='contacts'>
          <input type='text' className='search-fields' onChange={this.handleSearch} value={this.state.input}/>
<div>{this.state.input}</div>
          <ul className='contacts-list'>
            {
              CONTACTS.map(function(el){
                return <Contact 
                         key={el.id}
                         name={el.name}
                         phoneNumber={el.phoneNumber}
                         image={el.image}
                         />;
              })
            }
          </ul>
        </div>
      );
    }
}

ReactDOM.render(
  <ContactList/>,
  document.getElementById('root')
)

[Роман Александрович]

hollanditkzn, так вы хотели?

[hollanditkzn]

Роман Александрович, Ну ладно пойдет, конечно не то что я предполагал

[hollanditkzn]

Роман Александрович, Если только интересно, то я вот это ожидал

Где я вижу что это на данном примере объект, у которого length 1 и какие данные выводит и прочая информация в консоле. Но не буду заморачиваться. Просто там event выводишь target null становится, когда выводишь event.target там html код

[Роман Александрович]

hollanditkzn, как вы это достали ?

[hollanditkzn]

Роман Александрович, Я не из event достал, просто для примера я дал то что хотел бы видеть если вы про скриншот, а то что я написал, то сами посмотрите в консоль выведите что она event дает

Answer 1

[Роман Александрович]

let CONTACTS = [
  {
    id:1,
    name: 'Kamila Abcentova',
    phoneNumber: '[phone]',
    image: 'https://i.pinimg.com/736x/63/57/fa/6357fa6703775b165e739a1c6a1d0899--berges-portrait-paintings.jpg'
  },
  {
    id:2,
    name: 'Denis Abramov',
    phoneNumber: '[phone]',
    image: 'https://pbs.twimg.com/media/BvVsFVBCcAAT_Pt.jpg:large'
  },
  {
    id:3,
    name: 'Kristian Sendler',
    phoneNumber: '[phone]',
    image: 'https://thairomances.com/userfiles/ProfilePhoto/14244/39093-full_size.jpg?v=3'
  },
  {
    id:4,
    name: 'Marat Kizombov',
    phoneNumber: '[phone]',
    image: 'http://funstories.lol/wp-content/uploads/2016/07/2-121-768x768.jpg'
  }
];

class Contact extends React.Component{
  render(){
    return <li className='contact'>
      <img className='contact-image' src={this.props.image} width='60px' height='60px'/>
      <div className='contact-info'>
        <div className='contact-name'>{this.props.name}</div>
        <div className='contact-phone'>{this.props.phoneNumber}</div>
      </div>
    </li>
  }
}

class ContactList extends React.Component{
  constructor(props){
    super(props);
this.state={
input=""
}
    this.handleSearch = this.handleSearch.bind(this);

  }
  
  handleSearch(el){
    console.log(el.target.value)
this.setState({
input:el.target.value
})
  }
  render(){
      return(
        <div className='contacts'>
          <input type='text' className='search-fields' onChange={this.handleSearch} value={this.state.input}/>
<div>{this.state.input}</div>
          <ul className='contacts-list'>
            {
              CONTACTS.map(function(el){
                return <Contact 
                         key={el.id}
                         name={el.name}
                         phoneNumber={el.phoneNumber}
                         image={el.image}
                         />;
              })
            }
          </ul>
        </div>
      );
    }
}

ReactDOM.render(
  <ContactList/>,
  document.getElementById('root')
)