javascript - 反应 useState 挂钩变量值不会在输入 onChange 事件时更新

Question

使用反应功能组件反应 useState 钩子不会更新输入 onChange 事件

const [email, setEmail] = useState("");
// i'm not able to set input value in useeffect using this code
<GridItem xs={12} sm={12} md={4}>
  <CustomInput
    labelText="Email address"
    id="email-address"
    formControlProps={{
      fullWidth: true
    }}

    value={email}
    onChange={evt => setEmail(evt.target.value)}
  />
</GridItem>

标签： javascriptreactjs

Answer 1

应用程序.js

function App() {
  const [email, setEmail] = React.useState("");
  const handleChange = e => {
    setEmail(e.target.value);
  };
  return (
    <div>
      <h4>{email}</h4>
      <CustomInput handleChange={handleChange} />
    </div>
  );
}

自定义输入.js

import React from "react";

function CustomInput(props) {
  return (
    <div>
      <input type="text" onChange={props.handleChange} />
    </div>
  );
}

export default CustomInput;