Question

这个问题听起来很愚蠢，但是它将对我的React项目有很大帮助，并且将大大减少代码量。

我有一些类似以下的代码：

const [user, setUser] = useState({
      name: "",
      password: ""
      });

const [name, setName] = useState("");
const [password, setPassword] = useState("");

const handleInput = (e) => {

我想这样做

      let inputHandler =`set${(e.target.name.slice(0,1)).toUpperCase()}${e.target.name.slice(1)}`;
      inputHandler(e.event.value);

就像我正在做的

      setUser({...user,
           [e.target.name]:e.target.value
      });

};

<input onChange={handleInput} name="name"></input>
<input onChange={handleInput} name="password"></input>

重点是“通用”更新不同的状态，就像我对一个状态属性所做的那样。上面的代码确实简化了，在我的项目中有10多个状态要处理，我用200行代码实现了：D

Answer 1

只需将回调传递给您的“泛型函数”即可：

const handleInput = (e, set) => {
  set(`${e.target.name.slice(0, 1).toUpperCase()}${e.target.name.slice(1)}`);
};

// Usage
onClick={e => handleInput(e, setUser)}

// Or as curried function
const genInputHandler = set => e => {
  set(`${e.target.name.slice(0, 1).toUpperCase()}${e.target.name.slice(1)}`);
};

// Usage
onClick={genInputHandler(setUser)}

是否可以通过一个简单的函数处理多个useState挂钩？

1 个答案: