reactjs - 表单复选框动画不起作用，但表单确实起作用

问题描述

我对 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>
);

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

有没有人见过这样的东西？

这是代码沙箱的链接。这有点不同，因为我必须修改它才能在沙盒环境中工作。

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

谢谢！

标签： reactjsformsecmascript-6formik

reactjs - 表单复选框动画不起作用，但表单确实起作用

问题描述

解决方案

推荐阅读