我正在尝试在React中创建一个非常基本的useState挂钩,但无法弄清楚我在做什么错。这是一个简单的useState,可以将段落内的文本更改为您在文本字段中编写的内容。
export default function Demo() {
const [value, setValue] = React.useState();
const handleValue= () => {
setValue(value)
}
return(
<>
<TextField onChange={handleValue} />
<p>{value}</p>
</>
)
}
该段不显示任何内容。我错过了什么?
您的handleChange
函数当前正在将值设置为其自身。您必须将其分配给从获得的值TextField
。
这是一个工作示例。
const {
useState,
useEffect,
Fragment
} = React;
function Demo() {
const [value, setValue] = useState();
const handleValue = ({target}) => {
setValue(target.value);
}
return <Fragment>
<input type="text" onChange={handleValue}/>
<p>{value}</p>
</Fragment>;
}
const el = document.querySelector("#root");
ReactDOM.render(<Demo/>, el);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js"></script>
<div id="root"></div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句