时间戳

首页 > 解决方案 > 无法访问 e.target.id 即使当我在反应中登录 e.target 时它在那里

javascript - 无法访问 e.target.id 即使当我在反应中登录 e.target 时它在那里

问题描述

import { connect } from 'react-redux';
import { getClubs } from '../../actions/club';
import PropTypes from 'prop-types';

const ViewPlayers = ({ clubs, loading, getClubs }) => {
  useEffect(() => {
    getClubs();
  }, [getClubs]);

  const [form, editForm] = useState({
    club_id: ''
  });

  const selClub = e => {
    console.log(e.target); --> Has the id value set to the correct id
    console.log(e.target.id); --> outputs empty string
  };
  const submitData = e => {};
  return loading === true ? (
    <div>
      <h1>wait</h1>
    </div>
  ) : (
    <div className='container'>
      <h3>View players</h3>
      <form onSubmit={e => submitData(e)}>
        <div className='form-group'>
          <label className='mt-3'>
            <strong>Select Club</strong>
          </label>
          <select
            className='form-control mb-3'
            name='club'
            value={form.club_id}
            onChange={e => selClub(e)}
          >
            {clubs.map(data => {
              return (
                <option key={data._id} id={data._id}>
                  {data.name}
                </option>
              );
            })}
          </select>
        </div>
      </form>
    </div>
  );
};

ViewPlayers.propTypes = {
  loading: PropTypes.bool.isRequired,
  clubs: PropTypes.array.isRequired,
  getClubs: PropTypes.func.isRequired
};

const mapStateToProps = state => ({
  clubs: state.club.data,
  loading: state.club.loading
});

export default connect(mapStateToProps, { getClubs })(ViewPlayers);

好的，所以我已将 select 语句的选项标签上的 id 设置为当前俱乐部的 id。当我使用 console.log(e.target) 时，我可以看到为我的数据集中所有俱乐部设置的 id 值。但是，如果我 console.log(e.target.id) 我得到“空字符串”，即使它设置在上面的 console.log 到正确的 id???? 如果我做 e.target.value 我也得到正确的值？？？

怎么看不到 e,target.id ？？？

提前感谢您的帮助

标签： javascriptreactjslogging

解决方案

我不知道为什么您甚至需要在标签上使用该id属性。您可以为您的标签option指定一个，至少它是有意义的。对于标签，您要做的是指定它们的属性。然后你可以在你的处理程序中访问一个选定的值。idselectoptionvaluee.target.valueonChange

<select
  className='form-control mb-3'
  name='club'
  value={form.club_id}
  onChange={e => selClub(e)}
>
  {clubs.map(data => {
    return (
      <option key={data._id} value={data._id}>
        {data.name}
      </option>
    );
  })}
</select>

推荐阅读