handleChange 不是函数，请做出反应答案

【问题标题】：handleChange is not a function , reacthandleChange 不是函数，请做出反应
【发布时间】：2020-09-18 01:14:21
【问题描述】：

我试图将一个函数传递给一个反应组件，但它说它不是一个函数。据我所知，我可以控制台记录道具并设置它，就像我一直做的那样。请帮忙，谢谢！

编辑：当我尝试测试 onSubmit 函数时，我也遇到了同样的错误

<div className="bookshelf">
        <Searchbar
          handleChange={onChange}
          addInputClass={"searchbar_mobile_input"}
          addBtnClass={"searchbar_mobile_btn"}
        />
        <div className="bookshelf_heading_container">
          <h2 className="bookshelf__heading">
            Release the Kraken of Knowledge!
          </h2>
        </div>

import React, {Fragment} from "react";
const SearchBar = ({ addBtnClass, addInputClass, handleChange }) => {
  console.log(handleChange)
  return (
    <Fragment>
        <form className="search__form__input" onSubmit={() => handleSubmit(e)}>
      <input
        type="text"
        placeholder="Search by Title/Author"
        className={`searchbar__input ${addInputClass}`}
        name="search"
        onChange={(e) => handleChange(e)}
      ></input>
      <button type="submit" className={`btn ${addBtnClass}`}>
        Search
      </button>
    </form>
    </Fragment>
  );
};
export default SearchBar;

【问题讨论】：

你在哪里定义你的onChange函数？此外，handleSubmit 没有在任何地方定义。您作为参数传入的 e 也不是

标签： reactjs function callback

【解决方案1】：

这里有一个example，应该可以帮到你。您应该能够采用这个简化的示例并弄清楚如何将其应用到您的示例中。我会使用你的代码，但它不完整并且没有提供沙箱。

import React from "react";

export default function AppLogic() {
  const [readValue, writeValue] = React.useState("");
  const handleChange = (e) => writeValue(e.target.value);
  const handleSubmit = (e) => {
    e.preventDefault();
    alert("Submitted");
  };
  const props = { readValue, handleChange, handleSubmit };
  return <AppView {...props} />;
}

function AppView({ handleSubmit, handleChange, readValue }) {
  return (
    <div className="App">
      <h1>Name</h1>
      <form onSubmit={handleSubmit}>
        <input onChange={handleChange} value={readValue} />
        <input type="submit" />
      </form>
      <p>{readValue}</p>
    </div>
  );
}

【讨论】：