javascript - e.target.value 在 reactjs 中未定义

Question

li当用户单击它时，我正在尝试记录标签的值。但是当我单击它时，它会以某种方式引发错误li。 TypeError: Cannot read property 'target' of undefined 我认为我有关于将事件处理程序作为道具传递的问题。

这是父组件

const Category = props => {
  const dispatch = useDispatch();
  let [value, setValue] = useState("choose");
  let clickHandler = e => {
    console.log(e.target.value);
    dispatch({
      type: ADD_CATEGORY,
      payload: value
    });
  };
  return (
    <div className="part">
      <h3 className="cat">category</h3>
      <Options
        items={["one", "two", "three"]}
        name="category"
        clickHandler={clickHandler}
        value={value}
      />
    </div>
  );
};

这是孩子

const Options = props => {
  let [expanded, setExpanded] = useState(false);
  let clickHandler = () => {
    props.clickHandler();
    setExpanded(false);
  };
  return (
    <div className="options-container">
      <button
        className="option-head"
        onClick={() => setExpanded(!expanded)}
        value={props.value}
      >
        {props.value}
      </button>
      <ul className={expanded ? "options expanded" : "options not-expanded"}>
        <li className="ul-title" onClick={() => setExpanded(false)}>
          {props.name}
        </li>
        {props.items.map((item, index) => (
          <li key={index} onClick={clickHandler} value={item}>
            <p value={item}>{item}</p>
          </li>
        ))}
      </ul>
    </div>
  );
};

谢谢你！

标签： javascriptreactjs

Answer 1

请更改您的代码如下

const Category = props => {
  const dispatch = useDispatch();
  let [value, setValue] = useState("choose");
  let clickHandler = item => {
console.log(item);
dispatch({
  type: ADD_CATEGORY,
  payload: value
});
  };
  return (
<div className="part">
  <h3 className="cat">category</h3>
  <Options
    items={["one", "two", "three"]}
    name="category"
    clickHandler={clickHandler}
    value={value}
  />
</div>
  );
};

const Options = props => {
  let [expanded, setExpanded] = useState(false);
  let clickHandler = (item) => {
    props.clickHandler(item);
    setExpanded(false);
  };
  return (
    <div className="options-container">
      <button
        className="option-head"
        onClick={() => setExpanded(!expanded)}
        value={props.value}
      >
        {props.value}
      </button>
      <ul className={expanded ? "options expanded" : "options not-expanded"}>
        <li className="ul-title" onClick={() => setExpanded(false)}>
          {props.name}
        </li>
        {props.items.map((item, index) => (
          <li key={index} onClick={() => clickHandler(item)} value={item}>
            <p value={item}>{item}</p>
          </li>
        ))}
      </ul>
    </div>
  );
};

由于您没有在下面的代码中传递事件，因此它没有被传递给 Category 组件，因为它e是未定义的。