时间戳

首页 > 解决方案 > 向页面添加新元素

javascript - 向页面添加新元素

问题描述

所以，我对反应很陌生，所以我仍然不太确定我在做什么。我有一个使用纯 HTML、JQuery 和 CSS 的项目，但我正在尝试将其转换为响应。我有一个带有复选框的页面，当单击它们时，会在其中添加一个带有链接的 div，如果未选中，则会删除该 div：

if(element.checked != false) {
        $('.links').append('<div id="social">\
                              <p>\
                                 <a href = "https://instagram.com/" id="instagram">Instagram</a>\n\
                                 <button type="button" id="instagram" onclick="removeInstagram()">-</button>\
                              </p>\
                              <p>\
                                 <a href= "https://facebook.com/" id="facebook">Facebook</a>\n\
                                 <button type="button" id="facebook" onclick="removeFacebook()">-</button>\
                              </p>\
                              <p>\
                                 <a href= "https://twitter.com/" id="twitter">Twitter</a>\n\
                                 <button type="button" id="twitter" onclick="removeTwitter()">-</button>\
                              </p>\
                              <p>\
                                 <a href= "https://youtube.com/" id="youtube">Youtube</a>\n\
                                 <button type="button" id="youtube" onclick="removeYoutube()">-</button>\
                              </p>\
                           </div>');
    }
    else if(element.checked != true) {
       $("#social").remove();
    }

我正在尝试将其转换为组件内的 React，但我不确定我是否做得对。我有链接到我的复选框的功能，但我不知道单击时如何添加/删除链接：

import React, { Component } from "react";
import ReactDOM from "react-dom";
import { findDOMNode } from "react-dom";
import $ from "jquery";

export default class LoginPage extends Component {
    render() {
        return (
            <div id="container">
                <section className="presets">
                    <div>
                        <label for="item1">Social Media:</label>
                        <input
                            type="checkbox"
                            name="item1"
                            id="item1"
                            onChange={this.socialMedia.bind(this)}
                        />
                    </div>
                    <div>
                        <label for="item2">Tech:</label>
                        <input
                            type="checkbox"
                            name="item2"
                            id="item2"
                            onChange="toggleTech(this)"
                        />
                    </div>
                    <div>
                        <label for="item3">Sports:</label>
                        <input
                            type="checkbox"
                            name="item3"
                            id="item3"
                            onChange="toggleSports(this)"
                        />
                    </div>
                    <div>
                        <label for="item4">News:</label>
                        <input
                            type="checkbox"
                            name="item4"
                            id="item4"
                            onChange="toggleNews(this)"
                        />
                    </div>
                    <div>
                        <label for="item5">Games:</label>
                        <input
                            type="checkbox"
                            name="item5"
                            id="item5"
                            onChange="toggleGames(this)"
                        />
                    </div>
                    <div>
                        <label for="item3">School:</label>
                        <input
                            type="checkbox"
                            name="item6"
                            id="item6"
                            onChange="toggleSchool(this)"
                        />
                    </div>
                    <div>
                        <button
                            type="button"
                            id="custom"
                            onClick="customHandler(this)"
                        >
                            Add Custom Site
                        </button>
                    </div>
                </section>

                <section className="links"></section>
            </div>
        );
    }


    // Social(element) {
    //     if (element.checked != false) {
    //         $(".links").append(
    //             '<div id="social">\
    //                           <p>\
    //                              <a href = "https://instagram.com/" id="instagram">Instagram</a>\n\
    //                              <button type="button" id="instagram" onclick="removeInstagram()">-</button>\
    //                           </p>\
    //                           <p>\
    //                              <a href= "https://facebook.com/" id="facebook">Facebook</a>\n\
    //                              <button type="button" id="facebook" onclick="removeFacebook()">-</button>\
    //                           </p>\
    //                           <p>\
    //                              <a href= "https://twitter.com/" id="twitter">Twitter</a>\n\
    //                              <button type="button" id="twitter" onclick="removeTwitter()">-</button>\
    //                           </p>\
    //                           <p>\
    //                              <a href= "https://youtube.com/" id="youtube">Youtube</a>\n\
    //                              <button type="button" id="youtube" onclick="removeYoutube()">-</button>\
    //                           </p>\
    //                        </div>'
    //         );
    //     } else if (element.checked != true) {
    //         $("#social").remove();
    //     }
    // }
}

对此的任何帮助将不胜感激，我正在为此使用 MERN 堆栈。

标签： javascripthtmljqueryreactjs

解决方案

用 func comp 和 useState 试试这个 

export const LoginPage = () =>  {
    const [isChecked, setIsChecked] = useState(false);

    return (
      <div id="container">
        <section className="presets">
          <div>
            <label for="item1">Social Media:</label>
            <input
              type="checkbox"
              name="item1"
              id="item1"
              onChange={() => setIsChecked(!isChecked)}
            />
          </div>
          <div>
            <label for="item2">Tech:</label>
            <input
              type="checkbox"
              name="item2"
              id="item2"
              onChange="toggleTech(this)"
            />
          </div>
          <div>
            <label for="item3">Sports:</label>
            <input
              type="checkbox"
              name="item3"
              id="item3"
              onChange="toggleSports(this)"
            />
          </div>
          <div>
            <label for="item4">News:</label>
            <input
              type="checkbox"
              name="item4"
              id="item4"
              onChange="toggleNews(this)"
            />
          </div>
          <div>
            <label for="item5">Games:</label>
            <input
              type="checkbox"
              name="item5"
              id="item5"
              onChange="toggleGames(this)"
            />
          </div>
          <div>
            <label for="item3">School:</label>
            <input
              type="checkbox"
              name="item6"
              id="item6"
              onChange="toggleSchool(this)"
            />
          </div>
          <div>
            <button
              type="button"
              id="custom"
              onClick="customHandler(this)"
            >
              Add Custom Site
            </button>
          </div>
        </section>

        <section className="links">
          {isChecked ? <div id="social">
            <p>
              <a href = "https://instagram.com/" id="instagram">Instagram</a>
              <button type="button" id="instagram" onclick="removeInstagram()">-</button>\
            </p>
            <p>
              <a href= "https://facebook.com/" id="facebook">Facebook</a>
              <button type="button" id="facebook" onclick="removeFacebook()">-</button>\
            </p>
            <p>
              <a href= "https://twitter.com/" id="twitter">Twitter</a>
              <button type="button" id="twitter" onclick="removeTwitter()">-</button>\
            </p>
            <p>
              <a href= "https://youtube.com/" id="youtube">Youtube</a>
              <button type="button" id="youtube" onclick="removeYoutube()">-</button>\
            </p>
          </div> : null }
        </section>
      </div>
    );
}

推荐阅读