表单复选框动画不起作用，但表单确实有效

Question

我在使用 React 和 Formik(2.1) 时遇到了一个奇怪的问题。

我的页面上有一组复选框，用户可以选中或取消选中。

幕后部分正在工作...用户选择的复选框值被发送到 API 后端，当我将它们写到浏览器控制台时，我看到了选定的值.

但是，在小复选框方块内出现或消失的实际复选框永远不会显示。

我也不知道为什么。我尝试更新到最新版本的 Formik 和 React，但它没有改变。

由于实际值仍在传递，我想不出调试它的方法。

这是生成复选框的 React 组件：

const PlayerList = () => {

const [data, setData] = useState([]);

useEffect(() => {
    const fetchData = async () => {
        const result = await axios(
            'https://localhost:44376/api/players',
        );
        setData(result.data);
    };
    fetchData();
}, []);

return (
    <>
        {data.map((item, index) => (
            <label key={index}>
                <Field id={item.id} key={index} type="checkbox" name="gamePlayers" value={item.id} />
                {item.name}
            </label>
        ))}
    </>

);
}
export default PlayerList;

此组件将生成如下所示的表单输入：

<input name="gamePlayers" id="1" type="checkbox" value="1">

这里是 formik 形式的 React 组件：

<Formik
        initialValues={{
            gamePlayers: [],
            email: "",
            name: "",
            phone: ""
        }}
        onSubmit={async values => {
            await new Promise(resolve => setTimeout(resolve, 500));
            axios({
                method: "POST",
                url: "https://localhost:44376/api/gameentry",
                data: JSON.stringify(values)
            });
            console.log(JSON.stringify(values, null, 2));
        }}

    >
        {props => {
            const {
                values,
                touched,
                isSubmitting,
                handleSubmit,
                handleReset,
                setFieldValue
            } = props;
            return (
                <form onSubmit={handleSubmit}>

                    <div id="gameSection">Game Information</div>
                    <div id="players">
                        <label htmlFor="gamePlayers">
                            Game Player Type (check all that apply)
                        </label>
                        <PlayerList />
                    </div>
            );
        }}
    </Formik>
</div>
);

所以一切看起来都很好，表格看起来不错。只是复选框动画不工作，我想不出调试方法，因为从技术上讲，它可以工作。

有人见过这样的东西吗？

这里是一个代码沙箱link。它有点不同，因为我必须修改它才能在沙箱环境中工作。

https://codesandbox.io/s/inspiring-hodgkin-exufn

谢谢！

Answer 1

在 Formik 中实现复选框可能很棘手。你看你必须将输入的 JSX 及其标签传递到 component prop.

请在下面找到我的作品。

https://codesandbox.io/s/lingering-https-yw0jl

表单复选框动画不起作用，但表单确实有效

form checkbox animations are not working but form does work

forms

ecmascript-6

reactjs

formik