1 回答

TA貢獻1817條經驗 獲得超14個贊
您混淆了設置器功能。單擊時,調用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>
添加回答
舉報