反应 onClick 事件触发一键为时已晚

如何解决反应 onClick 事件触发一键为时已晚

我设置了一个组件来显示所有拥有帐户的玩家的照片。然后使用 onClick 事件处理程序在父组件中呈现该组件。问题是 onClick 事件触发一次点击太晚了。所以在第一次点击时状态不会改变，只有当我再次点击同一个播放器时状态才会改变。如果我点击下一个玩家，状态将仍然记录前一个玩家。下面是我负责该组件的代码片段。

以下是组件的设置。

const PlayerPhotos = ({ profiles,onClick }) => {
  return (
    <div className='playerPhotosRow'>
      <ul>
        {profiles.map((e) => (
          <li key={e.email}>
            <img src={e.photoURL} onClick={onClick} id={e.email}></img>
          </li>
        ))}
      </ul>
    </div>
  );
};`

const PlayerLoadChart = ({ profiles }) => {
  const [emailSelect,setEmailSelect] = useState('');

  const HandleClick = (e) => {
    setEmailSelect(e.target.id);
  };

  return (
    <div>{<PlayerPhotos profiles={profiles} onClick={HandleClick} />}</div>
  );
};

解决方法

首先移除 <PlayerPhotos profiles={profiles} onClick={HandleClick} /> 周围的 {}（div 也是不必要的，但不会影响功能）。并将函数名称更改为：handleClick（函数首字母小写）。

我不是 100% 认为这会解决问题，但从这个开始:)

那么我认为你应该有一个按钮而不是一个 img 标签（但那是为了可访问性）

const PlayerLoadChart = ({ profiles }) => {
  const [emailSelect,setEmailSelect] = useState('');

  const HandleClick = (e) => {
    setEmailSelect(e.target.id);
  };

  return (
    <PlayerPhotos profiles={profiles} onClick={HandleClick} />
  );
};

,

我刚刚复制了您的代码并进行了一些改进。目前没有问题。

const PlayerPhotos = ({profiles,onClick}) => {
  return (
    <div className='playerPhotosRow'>
      <ul>
        {profiles.map((profile) => (
          <li key={profile.email}>
            <img
              id={profile.email}
              src={profile.photoURL}
              onClick={onClick}
            />
          </li>
        ))}
      </ul>
    </div>
  );
};

const PlayerLoadChart = ({ profiles }) => {
  const [emailSelect,setEmailSelect] = React.useState('');

  const onClickHandler = React.useCallback((e) => {
    setEmailSelect(e.target.id);
  },[]);

  return (
    <div>
      <h1>{'Email: '}{emailSelect || 'none'}</h1>
      <PlayerPhotos profiles={profiles} onClick={onClickHandler} />
    </div>
  );
};

const App = () => {
  const profiles = [
    {
      email: '[e-mail]',photoURL: 'https://via.placeholder.com/150.png?text=User+1'
    },{
      email: '[e-mail]',photoURL: 'https://via.placeholder.com/150.png?text=User+2'
    },{
      email: '[e-mail]',photoURL: 'https://via.placeholder.com/150.png?text=User+3'
    }
  ];
  
  return <PlayerLoadChart profiles={profiles} />;
};

ReactDOM.render(<App />,document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>

<div id='app'></div>

,

从上面给出的代码中，我试图重现您提到的问题，但代码似乎运行良好。这是我的 codepen link，下面是您使用的代码。

在codepen中，你可能会注意到，当你点击图片时，相关的电子邮件会被记录在控制台中。

const PlayerPhotos = ({ profiles,onClick }) => {
    
    return (
      <div className='playerPhotosRow'>
        <ul>
          {profiles.map((e) => (
            <li key={e.email}>
              <img src={e.photoURL} onClick={onClick} id={e.email} />
            </li>
          ))}
        </ul>
      </div>
    );
};
  
const PlayerLoadChart = ({ profiles}) => {
    const [emailSelect,setEmailSelect] = React.useState('');
  
    const HandleClick = (e) => {
      setEmailSelect(e.target.id)
    }
  
    console.log(emailSelect);
    return (
        <div>
          {<PlayerPhotos profiles={profiles} onClick={HandleClick} />}
        </div>
    )
}

const App = () => {

    const profiles = [
        {
            email: "[e-mail]",photoURL: "https://i.insider.com/5d0019836fc92043771f7522?width=750&format=jpeg&auto=webp",},{
            email: "[e-mail]",photoURL: "https://lh3.googleusercontent.com/proxy/0vSwNGIyNd3sFKdRtyqquaOcs9sC75JNkklvfvUykS952p9ZICbgwOcjXuBHaXi60_TQz3le_keQ3dOTTKzj_2ZA7twMmDV1f-Ah3PY9HhKEfHbo39eOebDc7XZ93xlB4Bte9uiHmhFg",]

    return <div>
        <PlayerLoadChart profiles={profiles}/>
    </div>
}

ReactDOM.render(
  <React.StrictMode>
      <App />
  </React.StrictMode>,document.getElementById('root')
);