React 中的 onClick 事件在第一次点击时不起作用

Question

在这里，当我第一次按下搜索按钮时，“用户名”状态没有接收到任何数据。 “用户名”状态为空，并且App.js中的API请求失败。 第二次点击相同的按钮时，一切都按预期工作。如何使其在第一次单击时正常工作？这里有什么问题？

const Search = ({setInputText, setUsername, inputText, username}) => {

    const inputHandler = (e)=> {
        setInputText(e.target.value)
    }

    const searchHandler = (e)=> {
        e.preventDefault()
        setUsername(inputText)
    }

    return (
        <div>
            <form>
                <input value={inputText} onChange={inputHandler} type="text"/>
                <button onClick={searchHandler}>Search</button>
            </form>
        </div>
    )
}

编辑：在此添加App.js

function App() {

  //States
  const [inputText, setInputText] = useState("")
  const [username, setUsername] = useState("")
  const [stats, setStats] = useState([])

  return (
    <div className="App">
        <h1>Game Stats</h1>
        <Search setInputText={setInputText} setUsername={setUsername} inputText={inputText} username={username} setStats={setStats}/>
        <Stats stats={stats}/>
    </div>
  );
}

- Parth

---

你设计的组件似乎不太对。请发布父组件，以便我们可以分享一些有效的反馈，因为父组件中使用的props setInputText、setUsername、inputText和username的用法不清楚。 - rajesh pillai

建议 => <button onClick={searchHandler} disabled={inputText}>搜索</button> - guilherme victor ramalho natal

如果我做的都正确，可能出了什么问题呢？ - Parth

好的，因为我发布的代码可能会有一些混淆。我想将“console.log（username）”放在searchHandler函数中，因为那里我将执行API调用。状态是在按钮单击时设置的，但我无法在第一次单击时访问它。 - Parth

为什么你不能在 searchHandle 中使用 inputText 来进行 API 调用？ - Hyetigran

Answer 1

首先，你应该使用回调函数，像这样：

onClick={(e)=>searchHandler(e)}

如果你的输入元素里有handleBlur，请移除它。因为这些状态通常会干扰按钮第一次点击时的更新，而是在第二次点击时更新。我自己也遇到了同样的问题，移除后解决了。

- briancoder

Answer 2

在我阅读了那里之后，像<button onClick={(e) => searchHandler(e)}>搜索</button>这样的东西对我有所帮助。

似乎事件重叠了

- Mrmld Sky

Answer 3

您可以尝试以下操作，将searchHandler作为<form>标签中onSubmit的值。

<form onSubmit={(e) => searchHandler(e)}>
  <input value={inputText} onChange={inputHandler} type="text"/>
  <button type="submit"> Search </button>
</form>

更多关于https://reactjs.org/docs/forms.html的内容

- Lorenzo

---

你在onSubmit中使用了handleFormSubmit(e)还是searchHandler(e)？你遇到了什么错误？ - Lorenzo

使用了searchHandler，而且没有任何错误。用户名状态在第一次点击时没有更新，仅此而已。 - Parth

Answer 4

如果您的组件位于ScrollView组件内，并且遇到此行为，请将keyboardShouldPersistTaps={true}添加到ScrollView中。

- Nicholas Mberev