无法将输入值均衡到反应 useState Hook

Question

所以，我确实尝试做的事情是可能的，并且在基于 React Class 的组件中成功完成了。你看，基本上我尝试做的是一个简单的名称淋浴应用程序。这个应用程序做什么，它接收值，当按钮被点击时，该值显示在 h1 标签中。一切都很好，直到我试图使输入标签的“值属性”等于 useState（或反应挂钩）值。它甚至不让我打字！我的问题是什么？（我的应用程序基于一个组件）

import React, { useState } from 'react';

import './App.css';

function App() {

 const [string, setString] = useState("")

 const [input, setInput] = useState("")

 function handleInput(event){

  setInput(event.target.value)

 }

 function handleClick(){

   setString(input)

   setString("") // must empty the input box

  

 }

  return (

    <div>

      <input value={string} /* <= this must set the value of input to "string" state */ onChange={(event) => {handleInput(event)}}/>

      <button onClick={handleClick}>Click</button>

      <h1>your name: {string}</h1>

    </div>

    );

}

export default App;

尝试了一些东西，比如 value={string}，制作其他钩子，但没有用。任何解决方案或帮助将不胜感激！

Answer 1

您混淆了设置器功能。单击时，调用setInput('')以清除输入，并将内容setString(input)设置<h1>为当前输入字符串：function App() {&nbsp; const [string, setString] = React.useState("")&nbsp; const [input, setInput] = React.useState("")&nbsp; function handleInput(event){&nbsp; &nbsp; setInput(event.target.value)&nbsp; }&nbsp; function handleClick(){&nbsp; &nbsp; setInput('')&nbsp; &nbsp; setString(input)&nbsp; }&nbsp; return (&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; <input value={input} onChange={handleInput} />&nbsp; &nbsp; &nbsp; <button onClick={handleClick}>Click</button>&nbsp; &nbsp; &nbsp; <h1>your name: {string}</h1>&nbsp; &nbsp; </div>&nbsp; &nbsp; );}ReactDOM.render(<App />, document.querySelector('.react'));<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script><script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script><div class="react"></div>或者，更好的是，使用nameinstead of string，代码的意图会更清晰：function App() {&nbsp; const [input, setInput] = React.useState("")&nbsp; const [name, setName] = React.useState("")&nbsp; function handleInput(event){&nbsp; &nbsp; setInput(event.target.value)&nbsp; }&nbsp; function handleClick(){&nbsp; &nbsp; setInput('')&nbsp; &nbsp; setName(input)&nbsp; }&nbsp; return (&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; <input value={input} onChange={handleInput} />&nbsp; &nbsp; &nbsp; <button onClick={handleClick}>Click</button>&nbsp; &nbsp; &nbsp; <h1>your name: {name}</h1>&nbsp; &nbsp; </div>&nbsp; &nbsp; );}ReactDOM.render(<App />, document.querySelector('.react'));<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script><script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script><div class="react"></div>