reactjs - 如何在搜索表单中设置道具

Question

我正在创建搜索组件，但我对此有疑问。当他们从他们的董事会进入时，我如何从用户那里获得价值。这是代码搜索表单组件

import React from "react";
import PropTypes from "prop-types";
import "../Search/index.css";

const Search = ({ title }) => {
  return (
    <input
      type="search"
      className="search"
      placeholder="Search..."
      onChange={title}
    />
  );
}

Search.propTypes = {
  title: PropTypes.string,
};

Search.defaultProps = {
  title: "",
};

export default Search;

这是我展示的地方

import React from "react";
import { Container, Row, Col } from "react-bootstrap";
import Search from "./components/Search/index"

const App = () => {
  return (
    <Container fluid>
      <Row>
        <Col><Search title="depend on user" /></Col>
      </Row>
    </Container>
  );
};

export default App;

我知道 onChange 是一个函数，我该如何改变它。

我的想法是，当用户输入时，该值会显示很多，即根本不需要按 Enter 或按钮。

请帮我这个我的部分

Answer 1

你为什么要从 props 传递变化来管理它使用状态。

    import React from "react";
    import PropTypes from "prop-types";
    import "../Search/index.css";
    
    function Search() {
     let [searchString, setsearchString] = useState('');
     const handleChange = (e) => {
      setsearchString(e.target.value);
     }
      return (
        <input
          type="search"
          className="search"
          placeholder="Search..."
          onChange={handleChange}
          value={searchString}
        />
      );
    }
    
    export default Search;