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

Question

react useState hook won't update on input onChange event using react functional component

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>

Answer 1

Where is your function?

onChange={e => this.setEmail(e)} // use arrow function to bind this

setEmail = (e) => {
  yourSetFunction({[e.target.name]:e.target.value}) // assuming you give you input a name
}

Answer 2

App.js

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

CustomInput.js

import React from "react";

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

export default CustomInput;

Answer 3

const [email, setEmail] = useState(null);
const handleChange = (e) => {
  setEmail(e.target.value);
}
// 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={handleChange}
  />
</GridItem>