我怎样才能做一个通用的功能来改变本地状态

Question

我有 onChangeName 和 onChangeAge 函数，但我想从这两个中创建 1 个函数。

功能onChangeSomeState不起作用，我不知道为什么

import "./styles.css";
import { useState } from "react";

export default function App() {
  const [name, setName] = useState("");
  const [age, setAge] = useState("");

  const onChangeSomeState = (setFunc) => (event) => {
    setFunc(event.taget.value);
  };

  const onChangeName = (e) => {
    setName(e.target.value);
  };

  const onChangeAge = (e) => {
    setAge(e.target.value);
  };

  const onSubmit = () => {
    const res = JSON.stringify({
      name: name,
      age: age
    });
    console.log(res);
  };

  console.log(name);
  console.log(age);

  return (
    <div className="App">
      <input
        onChange={onChangeName}
        placeholder="name"
        value={name}
        className="input"
      />
      <input
        onChange={() => onChangeSomeState(setAge())}
        // onChange={onChangeAge}
        placeholder="age"
        value={age}
        className="input"
      />
      <button onClick={onSubmit} type="button" className="button">
        submit
      </button>
    </div>
  );
}

我在控制台中没有得到任何 age 值

Answer 1

你可以这样做：

onChange={onChangeSomeState(setAge)}

当您执行 onChange={() => onChangeSomeState(setAge())} 时，您并未将 event 传递给处理函数。

您还可以这样做：

onChange={(e) => onChangeSomeState(setAge)(e)}

还有一个拼写错误：setFunc(event.taget.value); 在 target

中缺少一个 r

我怎样才能做一个通用的功能来改变本地状态

how can I make a universal function to change the local state

javascript

reactjs

use-state