我的反应应用程序中的按钮在 iPhone 的浏览器中不可见

Posted 2023-03-12

【中文标题】我的反应应用程序中的按钮在 iPhone 的浏览器中不可见

【英文标题】：A button in my react app is not visible in browsers on iphone

【发布时间】：2020-08-23 18:04:02

【问题描述】：

我是 React 的新手，作为业余爱好，我开发了一个 MERN 堆栈网站并部署到 heroku。它在我的笔记本电脑和安卓手机上运行良好；但是当我在 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

【问题讨论】：

有很多潜在的原因，很难缩小范围！在询问 *** 问题时，它有助于提供上下文。例如，您可以提供示例代码、它在每个平台上的外观截图等等。

好的。我马上更新。

【参考方案1】：

很可能问题出在样式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;
   

【讨论】：

很遗憾，它不起作用.. 感谢您的帮助