在反应中使用antd表时将第一个输入的值设置为第二个输入答案

【问题标题】：Set value of 1st input into 2nd input when using antd table in react在反应中使用antd表时将第一个输入的值设置为第二个输入
【发布时间】：2021-10-24 15:07:38
【问题描述】：

我正在使用搜索框和按钮来过滤 AntD 表。我想在按钮的 onClick 事件中使用文本框的值（最终用户将输入）。实际上，我想根据最终用户输入的内容过滤数据。如果输入值匹配，则过滤器将起作用，反之亦然。我来这里是为了帮助获取文本框的值并将其设置为按钮的 onClick 事件。

下面是代码：

<div>
      <input type="text" placeholder="Search here" style={{ marginBottom: 8, marginRight: 8 }} />
      <input type="submit" value="Search" onClick={() => { const searchedName = setsearchedName(student.filter(obj => obj.name.match(***HERE I WANT TO SET USER'S INPUT***) ? true : false)) }
      } style={{ marginBottom: 8 }} />
      <Table columns={columns} dataSource={searchedName} />
    </div>

任何帮助。

【问题讨论】：

标签： javascript reactjs input tags antd

【解决方案1】：

const yourComponent = () => {
   const [text, setText] = useState("")
   const [searchedName, setSearchedName] = useState("")

   const handleSubmit = () => {
       setSearchedName(
           student.filter(obj => obj.name.match(text))
       )
   }

   return (
     <input value={text} onChange={(e) => setText(e.target.value)} />
     <input type="submit" onClick={handleSubmit} /> 
   )
}

您只需将第一个输入的值设置为状态并在您的handleSubmit 方法中使用它。

注意： 当您想在返回布尔值的方法上返回 true 或 false 时，您不必使用三元运算符。你可以像这样返回方法：

obj.name.match(text) // returns a boolean value

【讨论】：

PRSHL，这很好用，谢谢。但是搜索只区分大小写。我尝试使用“localeCompare”但失败了。
为避免区分大小写，您可以将两个字符串都与obj.name.toLowerCase() === text.toLowerCase() 匹配，我认为match 函数在不使用RegEx 时是多余的。
不客气。如果您愿意，请随时用绿色复选标记标记我的答案:)