你可以用
useCallback
让你的
handleChange
参考稳定。
注意我是如何使用
setState
它接受当前状态作为第一个参数
import { TextField } from "@material-ui/core";
import * as React from "react";
import { useContext, useState, useMemo, useCallback, createContext } from "react";
const FormContext = createContext<any>({});
const Form = ({ state, onChange, children }: any) => {
const handleChange = useCallback(
(name: any, val: any) => {
onChange((state) => ({ ...state, [name]: val }));
},
[onChange]
);
const context = useMemo(
() => ({
state,
handleChange,
}),
[state, handleChange]
);
return (
<FormContext.Provider value={context}>{children}</FormContext.Provider>
);
};
const SampleTextField = ({ name }: any) => {
const { state, handleChange } = useContext(FormContext);
const value = state[name];
return useMemo(
() => (
<TextField
name={name}
value={value}
onChange={(e: any) => handleChange(e.target.name, e.target.value)}
/>
),
[value, handleChange]
);
};
const FormExample = () => {
const [state, setState] = useState({ text1: "", text2: "" });
return (
<Form state={state} onChange={setState}>
<SampleTextField name="text1" />
<br />
<br />
<SampleTextField name="text2" />
</Form>
);
};
export default FormExample;