Блог

Главная - Вопросы по программированию - Как создать кнопку, подобную этому пользовательскому интерфейсу?

Как создать кнопку, подобную этому пользовательскому интерфейсу?

#reactjs

Вопрос:

Я пытаюсь создать эту кнопку в react.js но не могу этого сделать. Моя проблема не в CSS, а в том, как скрыть и отобразить эту кнопку, как пользовательский интерфейс. Это кнопка перед нажатием:

это кнопка перед нажатием

И это кнопка после нажатия :

кнопка после нажатия

Мой вопрос заключается в том, как создать этот переключатель, чтобы нажать на него невидимым и показать рис. 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

Комментарии:

1. заменяет ли эта форма кнопку или форма открывается как модальная, а кнопка находится в фоновом режиме?

Ответ №1:

У вас может быть одна переменная состояния для toggle экранов.

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

  return (
    <div>
      {showForm ? (
        <div>
          <div onClick={() => setShowForm(false)}> amp;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>
Метки: ,