我想知道如何打印我在textfield中输入的值。这是我的代码，一切都很好，但我希望在屏幕上的文本字段下打印输入的值，而不是console.log((；
import { useRef } from "react";
function About() {
const inputRef = useRef();
const naglowek = "Hello";
function clickHandler() {
alert("Clicked");
}
function handleClick() {
console.log(inputRef.current.value); // I want this to be printed on page under the input textfield
document.getElementById("textfield1").value = "";
}
return (
<div className="App">
<h1>{naglowek}</h1>
<button onClick={clickHandler}>Kliknij</button>
<input id="textfield1" type="text" ref={inputRef} />
<input type="button" value="tekst" onClick={handleClick} />
</div>
);
}
export default About;
根本不需要useRef。只需创建一个本地状态，该状态将跟踪输入的值。
const [currentValue, setCurrentValue] = useState();
const [isValueShown, showValue] = useState(false);
将onChange添加到输入：
<input id="textfield1" type="text" onChange={handleChange} />
{isValueShown && <label for="textfield1">{currentValue}</label>}
handleChange：
const handleChange = (e) => {
setCurrentValue(e.target.value)
};
显示：
const handleClick = () => {
showValue(true);
}
useRef((不会触发重新渲染，而是用于保留值。useRef((的理想用例是获取底层dom节点。以便我们可以访问dom节点并修改其属性。这里需要的是一个受控组件。
我们在这里使用useState钩子的原因是触发重新渲染，以便UI与组件状态同步。建议在一段时间内通过某些sideEffect(如API调用(或使用交互(如本例中的交互(更改状态中的值。
import { useState } from "react";
function About() {
const [value, setValue] = useState('');
const [ showValue, setShowValue ] = useState(false);
function clickHandler() {
alert("Clicked");
}
function handleClick() {
setShowValue(currentShowValue => !currentShowValue)
}
return (
<div className="App">
<h1>{naglowek}</h1>
<button onClick={clickHandler}>Kliknij</button>
<input id="textfield1" value={value} type="text" onChange={(e) => setValue(e.target.value) }/>
<input type="button" value="tekst" onClick={handleClick} />
<p>The value gets rendered as you type: {value}</p>
{showValue && <p> The value gets rendered onClick: {value}</p>}
</div>
);
}
export default About;
参考
受控组件
import { useState, useEffect } from "react";
function About() {
const [text, setText] = useState('');
const [showValue, setShowValue] = useState(false);
const naglowek = "Hello";
let inputField;
function clickHandler() {
alert("Clicked");
}
// Show the value on click
function handleClick() {
setShowValue(true);
}
// Store & Update the value on change
function handleChange(event) {
setText(event.target.value);
}
return (
<div className="App">
<h1>{naglowek}</h1>
<button onClick={clickHandler}>Kliknij</button>
<input id="textfield1" type="text" onChange={handleChange} />
{showValue && text}
<input type="button" value="tekst" onClick={handleClick} />
</div>
);
}
export default About;
https://codesandbox.io/embed/reverent-smoke-4wjh1aa