我的React应用中的按钮在iPhone的浏览器中不可见

问题描述

我是React的新手，作为爱好，我开发了一个MERN Stack网站并部署到heroku。它可以在我的笔记本电脑和android手机上正常工作；但是，当我在iphone 6和iphone 7手机上尝试该功能时，我注意到没有出现“提交”按钮之一。 （Material-UI按钮）我认为，如果代码中有错误，则它将无法在任何地方正常工作。为什么在iPhone上会出现这种问题？你能帮我吗？例如我的帖子添加页面的代码

import React,{ useState,useContext,useEffect,Fragment } from "react";
import {
  generalContext,authContext,} from "../../../../../WRAPPERS/Context/myContext";
import Editor from "../../../../editor/Editor";
import Input from "../../../../formelements/Input";
import Button from "@material-ui/core/Button";
import makeStyles from "@material-ui/styles/makeStyles";
import { useHistory } from "react-router-dom";
import useHttpClient from "../../../../../hooks/useHttpClient";
import { useForm } from "../../../../../hooks/useForm";
import ImageUpload from "../../../../formelements/imageUpload/imageUpload";
import FormControl from "@material-ui/core/FormControl";
import Select from "@material-ui/core/Select";
import InputLabel from "@material-ui/core/InputLabel";
import Spinner from "../../../../spinner/Spinner";

const InsertBlog = () => {
  const { isLoading,error,open,sendRequest,clearError } = useHttpClient();
  const general = useContext(generalContext);
  const auth = useContext(authContext);
  const history = useHistory();
  const [categories,setCategories] = useState([]);

  const [select,setselect] = useState();

  const [newPost,setNewPost] = useState({
    title: "",content: "",});

  const [formState,inputHandler,setFormData] = useForm(
    {
      image: {
        value: "",isValid: false,},false
  );

  const useStyles = makeStyles({
    form: {
      display: "flex",flexDirection: "column",paddingBottom: ".5rem",width: "100%",height: "100%",justifyContent: "space-between",textAlign: "center",overflowX: "hidden",label: {
      textdecoration: "underline",margin: ".3rem auto .2rem auto",fontSize: "1rem",formControl: {
      margin: "1rem",minWidth: 120,});

  const classes = useStyles();

  useEffect(() => {
    const fetchCategories = async () => {
      try {
        const res = await sendRequest(
          process.env.REACT_APP_BACKEND_URL + "/blog/categories"
        );
        console.log(res.categories);
        setCategories(res.categories);
      } catch (error) {}
    };
    fetchCategories();
  },[]);

  return (
    <Fragment>
      {isLoading && <Spinner />}

      <form
        className={classes.form}
        onSubmit={async (e) => {
          e.preventDefault();
          try {
            const formData = new FormData();
            formData.append("title",newPost.title);
            formData.append("content",newPost.content);
            formData.append("image",formState.inputs.image.value);
            formData.append("kullanici",auth.userId);
            formData.append("username",auth.name);
            formData.append("category",select);
            const responseData = await sendRequest(
              process.env.REACT_APP_BACKEND_URL + `/blog`,"POST",formData
            );
            setNewPost({ title: "",content: "" });
            history.push(
              `/Blog/postId/${responseData.blog._id}/Başlık/${responseData.blog.title}`
            );
          } catch (err) {}
        }}
      >
        <FormControl variant="outlined" className={classes.formControl}>
          <InputLabel htmlFor="outlined-age-native-simple">
            Lütfen Bir Kategori Seçin
          </InputLabel>
          <Select
            required
            native
            value={select}
            onChange={(e) => setselect(e.target.value)}
            label="Lütfen Bir Kategori Seçin"
            inputProps={{
              name: "Lütfen Bir Kategori Seçin",id: "outlined-age-native-simple",}}
          >
            <option aria-label="None" value="" />
            {!isLoading &&
              categories.length > 0 &&
              categories.map((category) => (
                <option key={category._id} value={category._id}>
                  {category.label}
                </option>
              ))}
          </Select>
        </FormControl>
        <Input
          required
          bg="white"
          label="Post Başlığı"
          style={{ marginTop: ".1rem",flex: 1 }}
          inputStyle={{ marginBottom: "1rem" }}
          value={newPost.title}
          onChange={(e) => setNewPost({ ...newPost,title: e.target.value })}
        />
        <Editor
          type="blog"
          style={{ flex: 15 }}
          value={newPost.content}
          onChange={(e,editor) => {
            const data = editor.getData();
            setNewPost({ ...newPost,content: data });
          }}
        />
        <ImageUpload
          id="image"
          onInput={inputHandler}
          center
          errorText="Lütfen Geçerli Bir Resim Yükleyiniz"
        />
        <Button
          style={{ flex: 1 }}
          variant="contained"
          size="medium"
          color="primary"
          fullWidth
          type="submit"
        >
          Gönder
        </Button>
      </form>
    </Fragment>
  );
};

export default InsertBlog;

The Gönder(submit) button normally looks like this

The button not showing up on iphone 6

解决方法

问题很可能出在flex样式上

可以通过三种方式解决：

（1）flex: 1 1;

（2）-webkit-flex: 1 1 100%;

（3）

    form: {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      flexDirection: column;
      paddingBottom: .5rem;
      width: 100%;
      height: 100%;
      justifyContent: space-between;
      textAlign: center;
      overflowX: hidden;
   }