javascript - 带有搜索提示 ReactJs 的多个输入字段

Question

我有一个页面，通过单击按钮动态加载输入组件，输入组件是自定义搜索栏，当用户输入搜索输入时会显示提示。提示正在工作，但我无法让 onclick 函数更新输入文本，以便将其转换为字符串数组。

import React, { useCallback } from "react";
import { Col, Form } from "react-bootstrap";
const FormComponent = (props) => {
  const arrhandler = useCallback(
    (value) => {
      props.setValue(value);
      props.setResult([]);
    },
    [props.setValue]
  );
  return (
    <Col xs={12} sm={12} md={12} lg={4}>
      <Form.Group className="mb-3">
        <Form.Label>DEPARTURE</Form.Label>
        <Form.Control
          type="text"
          value={props.value}
          onChange={props.handler}
        />
      </Form.Group>
      {props.arr &&
        props.arr.map((port, i) => (
          <div key={i} onClick={() => arrhandler(val.name)}>
            {val.name}
          </div>
        ))}
    </Col>
  );
};
export default FormComponent;

这是我的表单组件

在我的父组件中

import React, { useEffect, useState } from "react";
import { Container, Button } from "react-bootstrap";
import axios from "axios";

const ParentComponent = () => {
  const [forms, setForms] = useState([]);
  const [value, setValue] = useState("");
  const [result, setResult] = useState([]);

  useEffect(() => {
    axios.post(`/api/search/${value}`).then((res) => setResult(res.data));
  }, [value]);

  const newForm = (e) => {
    setForms(forms.concat(<FormComponent key={forms.length} />));
  };

  return (
    <Container>
      <Button
        className="col-lg-5 col-sm-12 mb-2"
        variant="outline-secondary"
        size="lg"
        onClick={newForm}
      >
        Add New Search
      </Button>
      {form.length > 0
        ? forms.map((form) => (
            <FormComponent
              value={form.value}
              handler={(e) => setValue(e.target.value)}
              arr={result}
              setValue={setValue}
              setResult={setResult}
            />
          ))
        : ""}
    </Container>
  );
};

我似乎无法弄清楚如何使用 onclick 函数更新输入字段，以便我可以将结果存储在数组中。

标签： javascriptreactjs