анимация флажка формы не работает, но форма работает - PullRequest
Новая
       4

анимация флажка формы не работает, но форма работает

0 голосов
/ 24 марта 2020

У меня странная проблема с 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">

А вот компонент React с formik Форма: 

<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

Спасибо!

1 Ответ

1 голос
/ 24 марта 2020

Внедрение флажка в Formik может быть сложным. Вы видите, что должны передать JSX ввода вместе с его меткой в ​​component prop.

Пожалуйста, найдите мою работу ниже.

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

...