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

您的 setter 功能混淆了。单击时，调用 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>

或者，更好的是，使用 name 而不是 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>

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

Cant equalize value of input to a react useState Hook

javascript

frontend

web-frontend

reactjs