无法将输入值均衡到反应 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() {

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

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

  function handleInput(event){

    setInput(event.target.value)

  }

  function handleClick(){

    setInput('')

    setString(input)

  }

  return (

    <div>

      <input value={input} onChange={handleInput} />

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

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

    </div>

    );

}

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() {

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

  const [name, setName] = React.useState("")

  function handleInput(event){

    setInput(event.target.value)

  }

  function handleClick(){

    setInput('')

    setName(input)

  }

  return (

    <div>

      <input value={input} onChange={handleInput} />

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

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

    </div>

    );

}

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>