Question

我正在尝试将函数传递给react组件，但它说它不是函数。我可以控制台记录道具，并且据我所知，已经按照我一直做的方式进行了设置。请帮忙，谢谢！

编辑：当我尝试测试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;

Answer 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>
  );
}

handleChange不是一个函数，反应

1 个答案: