时间戳

首页 > 解决方案 > 同时在两个输入字段中写入值ReactJS

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

问题描述

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

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

如果我只在顶部输入字段中输入值，它也会出现在底部。就像它总是使我在任何领域的价值翻倍。

在此处输入图像描述

代码

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;

编辑1

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

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

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

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 |     }

标签： reactjsinput

解决方案

首先，您需要为 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>

推荐阅读