Question

是否有一种方法可以检索输入文本的值，并使用钩子将其作为参数传递给按钮事件？到目前为止，这是代码。

谢谢您的帮助。

const TransactionDetailsPanel = props => {
  const [query, setQuery] = useState('');

  const options = [
    { value: '1', label: '1' },
    { value: '2', label: '2' },
    { value: '3', label: '3' }
  ]

  function checkQuery() {
    setQuery("AND TYPE='C'");
  }

  return (
      <div className="columns is-gapless is-marginless">
          <Select className="column is-3" options={options} 
placeholder="Advanced Detail Search" />
          <input className="column is-3"
                 type="text"
                 name="advancedQuery"
                 placeholder="Enter query here..."
                 onChange={checkQuery}/>
      </div>)

Answer 1

如果要通过单击鼠标按钮来更新查询状态值，可以使用useState()和createRef()的组合

查看此沙箱：https://codesandbox.io/s/interesting-haibt-9d8y8

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  const [query, setQuery] = useState('');

  const inputRef = React.createRef()

  const updateQuery = () => {
    const inputText = inputRef.current.value
    setQuery(inputText)
  }

  useEffect(() => {
    console.log(`you have updated your query to ${query}`) 
  }, [query])

  return (
    <div className="App">
      <input ref={inputRef}/>
      <button onClick={updateQuery}>Click</button>
      <h4>Input Text: {query}</h4>
    </div>
  );
}

因此，使用createRef()，我们为input标签创建了引用，使我们可以访问其中的当前文本。

然后我们为按钮提供了一个onClick处理程序，当执行该操作时，我们将从输入引用中提取值，并使用它来更新查询状态。

此时，只要状态发生变化，您就可以在useEffect内部运行任何其他逻辑。

使用react中的useEffect Hook检索输入文本并将其保存在变量中的方法

1 个答案: