Ошибка в свойстве event.target.name. Иногда он читает свойство, а иногда нет

Question

Я получаю ошибку, когда нажимаю кнопку. это становится странным, потому что некоторые это работает, а иногда нет.

import React from 'react';
class Profile extends React.Component{
    constructor(){
        super();
        this.state={
            posts:[],
        }
        this.increase = this.increase.bind(this);
    }
    increase(event){
        event.preventDefault();
        var name = event.target.name;
        var post = name.split(':')[0];
        var applaused =name.split(':')[1];
        var k = name.split(':')[2];
        //some related code
    }
    render(){
        var posts=[];
                var k=-1;
                posts = this.state.posts.map((post)=>{
                   k++;
                   var namek=`${post._id}:${post.applaused}:${k}`
                   var applause=post.applaused=='applause'?<p>applause</p>:<p>applaused</p>
                return(
                <div key={post._id}>
                    <p>{post.post}</p>
                <button onClick={this.increase} name={namek}>{applause}</button>
                })
        return(
            <div>
                {posts}
            </div>
        )
    }
}

export default Profile; 

Я получаю ошибку: -

Невозможно прочитать разделение свойств undefined в строке- : 13

Answer 1

Цель события зависит от того, на какой элемент вы нажимаете. Иногда этот элемент не имеет атрибута name. Таким образом, вы не можете использовать метод String # split, если event.target.name равен undefined.

. Для отладки я бы записал значения element.target и name, прежде чем пытаться разделить name, чтобы увидеть, что Элемент является целью и каким атрибутом имени он обладает.

    var name = event.target.name;
    console.log("Target is:", event.target, "and it's name is", name);
    var post = name.split(':')[0];

Если вы хотите исправить свою ошибку, вы можете проверить, нет ли у элемента атрибута name. Есть несколько способов сделать это, в этом случае ...

• if (!event.target.hasAttribute('name')) { // no name
• if (!('name' in event.target)) { // no name
• if (event.target.name === undefined) { // no name
• if (typeof event.target.name === 'undefined') { // no name

Answer 2

В функции увеличение вы используете event.target .

Поскольку у вас есть тег кнопки, который содержит тег ap, возможно, что event.target - это когда-то тег p. Это зависит от того, где пользователь нажимает на кнопку. Тег p не имеет атрибута name , поэтому, когда пользователь нажимает на тег p внутри кнопки, значение равно undefined .

Вы хотите всегда получать тег кнопки в функции увеличение . Вы можете сделать это, используя event.currentTarget . currentTarget - это всегда тег, для которого установлен атрибут onClick .

В заключение: используйте event.currentTarget.name вместо event.target.name , поэтому вы всегда получите значение атрибута name тега кнопки.

increase(event){
    var name = event.currentTarget.name;
}

Дополнительная информация о event.target vs event. currentTarget можно найти в этом ответе StackOverflow: { ссылка }

Фрагмент кода, демонстрирующий разницу между event.target и event.currentTarget:

function increase(event) {
  alert(
    'event.target: ' + event.target.tagName + '\n' +
    'event.currentTarget: ' + event.currentTarget.tagName
  )
}

button {
  background: #faa;
}

p {
  background: #aaf;
  padding: 10px;
}

<button onClick="increase(event)">
  The button tag
  <p>The p tag</p>
</button>

Answer 3

Чтобы избежать ошибки " Невозможно прочитать разделение свойств неопределенного ", вам необходимо проверить, определена ли ваша переменная name следующим образом:

if(name !== undefined) {
  // now you are sure that name is defined
}

== Дополнительные мысли ==

Более того, я бы лучше разделил имя один раз, а затем получил бы каждый элемент из массива:

if(name !== undefined) {
  const nameSplitted = name.split(':');
  var post = nameSplitted[0];
  var applaused = nameSplitted[1];
  var k = nameSplitted[2];
}