同时在两个输入字段中写入值ReactJS

Question

我在一个输入字段中输入值时遇到问题，它也会出现在另一个输入字段中。

在屏幕截图中，我开始在底部字段中输入，但数字也开始出现在顶部字段中。

如果我只在顶部输入字段中输入值，它也会出现在底部。就像我在任何字段中输入的值总是加倍一样。

代码

import React from "react";
import { Button, Form } from "react-bootstrap";

const symbols = [
  "ADABTC",
  "AIONBTC",
  "ALGOBTC",
  "ARDRBTC",
  "KAVABTC",
  "ETHBTC",
  "ETCBTC"
];

function PriceTriggerField() {
    
 const [searchTerm, setSearchTerm] = React.useState("");
 const [searchResults, setSearchResults] = React.useState([]);
 const handleChange = event => {
    setSearchTerm(event.target.value);
  };
 React.useEffect(() => {
    const results = symbols.filter(symbols =>
      symbols.toUpperCase().includes(searchTerm)
    );
    setSearchResults(results);
  }, [searchTerm]);

  return (
    <div className="App">
        <h6>Price Alert History</h6>
      <Form>
          <input id='hey'
        type="text"
        placeholder="Symbol"
        value={searchTerm}
        onChange={handleChange}
      />
      </Form>
      
       <input
        type="number"
        placeholder="Price"
        value={searchTerm}
        onChange={handleChange}
      />
<ul>
    {
        searchTerm.length > 0 && searchResults.map(item => <li>{item}</li>)
    }
</ul>
      <Button variant="secondary">Set</Button>
    </div>
  );
}

export default PriceTriggerField;

EDIT1

在接受@Ziarno 回答后，我开始收到此错误。

示例 - 我在第一个字段中输入 ADABTC，当我开始在另一个字段中输入数字时，它会因此错误而中断（如下所示）

当我在两个输入字段中输入值时，我的 react 应用程序中断并且我收到此错误

TypeError: searchSymbols.map is not a function
PriceTriggerField
src/Components/PriceTriggerField.jsx:46
  43 |         value={searchSymbols}
  44 |         onChange={handleChangeSymbol}
  45 |       />
> 46 | <ul>
  47 |     {
  48 |         searchTerm.length > 0 && searchSymbols.map(item => <li>{item}</li>)
  49 |     }

Answer 1

首先，您需要为 2 个不同的输入提供 2 个不同的状态值

...
 const [searchTerm, setSearchTerm] = React.useState("");
 const [searchSymbol, setSearchSymbol] = React.useState("");
 const handleChangeTerm = event => {
    setSearchTerm(event.target.value);
  };
 const handleChangeSymbol = event => {
    setSearchSymbol(event.target.value);
  };

  return (
    <div className="App">
        <h6>Price Alert History</h6>
      <Form>
          <input id='hey'
        type="text"
        placeholder="Symbol"
        value={searchSymbol}
        onChange={handleChangeSymbol}
      />
      </Form>
      
       <input
        type="number"
        placeholder="Price"
        value={searchTerm}
        onChange={handleChangeTerm}
      />
...

其次，您不必对符号使用 setState，只需显示按搜索词过滤的符号即可。删除整个React.useEffect 并执行以下操作：

<ul>
    {symbols
       .filter(symbol => symbol.toUpperCase().includes(searchTerm))
       .map(item => <li>{item}</li>)
    }
</ul>