我如何在 React 中制作一个非常基本的 useState 钩子？

Question

我正在尝试在 React 中制作一个非常基本的 useState 挂钩，但无法弄清楚我做错了什么。这是一个简单的 useState，它将段落内的文本更改为您在文本字段中写入的任何内容。

export default function Demo() {

const [value, setValue] = React.useState();
const handleValue= () => {
    setValue(value)
}
  
return(

  <>
    <TextField onChange={handleValue} />
    <p>{value}</p>
  </>

 )
}

该段落未呈现任何内容。我错过了什么吗？

Answer 1

您需要处理来自更改处理程序的值并使用它来更新您的状态

export default function Demo() {

const [value, setValue] = React.useState();
const handleValue= (e) => {
    setValue(e.target.value)
}
  
return(

  <>
    <TextField onChange={handleValue} />
    <p>{value}</p>
  </>

 )
}

Answer 2

您的 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>

我如何在 React 中制作一个非常基本的 useState 钩子？

How do i make a very basic useState hook in React?

reactjs

use-state