如何创建这样的 UI 按钮？

大佬教程收集整理的这篇文章主要介绍了如何创建这样的 UI 按钮？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决如何创建这样的 UI 按钮？？

我正在尝试在 react.Js 中创建此按钮，但无法执行此操作。 我的问题不是 CSS 是如何像 UI 一样隐藏和显示这个按钮。 这是点击前的按钮：

这是点击后的按钮：

我的问题是如何创建这个切换按钮，点击它不可见并显示图片 2？

这是我的代码：

    import React,{Component} from "react";
    import axios from "axios";
    import ContentUploadForm from "../../../dashboardContent/ContentUploadForm";
    
    
    class UploadContentbutton extends Component {
        constructor(props) {
            super(props);
            this.state = {
                file : null
            };
            this.onFormsubmit = this.onFormsubmit.bind(this);
            this.onChange = this.onChange.bind(this);
        }
        onFormsubmit (E) {
            e.preventDefault();
            const formData = new FormData();
            formData.append('filename',this.state.filE);
            const config = {
                headers : {
                    'content-type' : 'multipart/form-data'
                }
            };
            axios.post("/API/momayezi/uploadfiles/upload",formData,config)
                .then((responsE) => {
                    alert("The file is successfully uploaded");
                }).catch((error) => {
                    console.log(error)
            })
        }
        onChange (E) {
            this.setState({
                file : e.target.files[0]
            });
        }
    
    
        render() {
            return (
                <div classname="mt-5">
                    <div classname={"row"}>
                        <div classname={"col-12"}>
                            <form onsubmit={this.onFormsubmit}>
                                <input accept={"jpg"} type={"file"} name={"filename"}  onChange={this.onChangE}/>
                                <button type={"submit"}>ارسال</button>
                            </form>
                            <ContentUploadForm />
                        </div>
                    </div>
                </div>
            );
        }
    
    }
    
    export default UploadContentbutton

解决方法

const component = () => {
  const [showForm,setShowForm] = React.useState(false);

  return (
    <div>
      {showForm ? (
        <div>
          <div onClick={() => setShowForm(false)}> &larr; go BACk </div>
          <div className="second"> Form Here </div>
        </div>
      ) : (
        <div>
          <button className="first" onClick={() => setShowForm(true)}> Click me </button>
        </div>
      )}
    </div>
  );
};

ReactDOm.render(<Component />,document.getElementById("app"))

.first {
  width: 400px;
  border-radius: 10px;
  border: 1px solid grey;
}

.second {
  width: 400px;
  height: 200px;
  margin-top: 20px;
  border: 1px solid grey;
}

<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>


<div id="app"></div>

大佬总结

以上是大佬教程为你收集整理的如何创建这样的 UI 按钮？全部内容，希望文章能够帮你解决如何创建这样的 UI 按钮？所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。