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

Question

所以，我尝试做的事情是可能的，并且在基于 React 类的组件中成功完成。 你看，基本上我试图做的是一个简单的名字淋浴应用程序。 这个应用程序做什么，它接收值，当单击按钮时，该值显示在 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>