gorden's questions

我有一个 div，其中另一个 div 可以移动、调整大小和旋转。我怎样才能做到这一点，当这个 div 位于中心时，它会通过警告通知我它恰好位于另一个 div 的宽度或高度的中心。

当您更改输入 X,Y 中的值时，会发出此警告

警告：组件正在将受控输入更改为不受控。这可能是由于值从定义变为未定义引起的，这不应该发生。决定在组件的生命周期内使用受控输入元素还是不受控输入元素。更多信息：https ://reactjs.org/link/controlled-components

在您已经更改了数字并且想要移动 div 之后，X 或 Y 会非常快速地增加其值并且 div 会超出窗口警告 (2)

警告：收到value属性的 NaN。如果这是预期的，请将值转换为字符串。

codeandbox.io 上的代码在这里

import "./styles.css";
import React, { useRef, useState, useEffect } from "react";

const appStyle = {
  fontFamily: "sansSerif",
  textAlign: "center",
  userSelect: "none"
};

const inputCStyle = {
  width: "100px",
  height: " 30px",
  fontSize: "4vw",
  position: "relative",
  top: "0",
  left: "0",
  display: "flex",
  cursor: "pointer"
};

const h1Style = {
  display: "block",
  margin: "0",
  padding: "0",
  marginLeft: "20px",
  paddingRight: "10px"
};

const quickAndDirtyStyle = {
  width: "200px",
  height: "200px",
  background: "#FF9900",
  color: "#FFFFFF",
  display: "flex",
  justifyContent: "center",
  alignItems: "center"
};

export default function App() {
  const [pressed, setPressed] = useState(false);
  const [position, setPosition] = useState({ x: 0, y: 0 });
  const ref = useRef();

  // Monitor changes to position state and update DOM
  useEffect(() => {
    if (ref.current) {
      ref.current.style.marginLeft = `${position.x}px`;
      ref.current.style.marginTop = `${position.y}px`;
    }
  }, [position]);

  // Update the current position if mouse is down
  const onMouseMove = (event) => {
    if (pressed) {
      setPosition({
        x: position.x + event.movementX,
        y: position.y + event.movementY
      });
    }
  };

  const handleChange = (e, type) => {
    setPosition({
      [type]: e.target.value
    });
  };

  const inputCP = useRef();
  const editItemCP = () => {
    inputCP.current.select();
  };

  return (
    <div className="App" style={appStyle}>
      <div style={{ display: "flex" }}>
        <h1 style={h1Style}>X</h1>
        <input
          style={inputCStyle}
          className="inputC"
          type="number"
          value={position.x}
          ref={inputCP}
          onClick={editItemCP}
          onChange={(e) => handleChange(e, "x")}
        />
        <h1 style={h1Style}>Y</h1>
        <input
          style={inputCStyle}
          className="inputC"
          type="number"
          value={position.y}
          onChange={(e) => handleChange(e, "y")}
        />
      </div>
      <div
        style={{
          position: "absolute",
          top: "50%",
          left: "50%",
          transform: "translate(-50%,-50%)"
        }}
      >
        <div
          ref={ref}
          style={quickAndDirtyStyle}
          onMouseMove={onMouseMove}
          onMouseDown={() => setPressed(true)}
          onMouseUp={() => setPressed(false)}
          onMouseLeave={() => setPressed(false)}
        >
          <p>{pressed ? "Dragging..." : "Press to drag"}</p>
        </div>
      </div>
    </div>
  );
}

如何修复警告：您在value没有处理程序的情况下为表单字段提供了道具onChange。这将呈现一个只读字段。如果该字段应该是可变的，请使用defaultValue. 否则，设置其中一个onChange或 `readOnly ?

import React, { useRef, useState, useEffect } from "react";

const quickAndDirtyStyle = {
  width: "200px",
  height: "200px",
  background: "#FF9900",
  color: "#FFFFFF",
  display: "flex",
  justifyContent: "center",
  alignItems: "center"
};

const Container = {
  fontFamily: "sans-serif",
  textAlign: "center",
};

const inputC = {
  width: "100px",
  height: "30px",
  fontSize: "4vw",
  position: "relative",
  top: "0",
  left: "0",
  display: "flex",
  cursor: "pointer"
};

const h1 = {
  display: "block",
  margin: "0",
  padding: "0",
  marginLeft: "20px",
  paddingRight: "10px"
};

export default function App() {

  const [pressed, setPressed] = useState(false);
  const [position, setPosition] = useState({ x: 0, y: 0 });
  const ref = useRef();

  // Monitor changes to position state and update DOM
  useEffect(() => {
    if (ref.current) {
      ref.current.style.marginLeft = `${position.x}px`;
      ref.current.style.marginTop = `${position.y}px`;
    }
  }, [position]);

  // Update the current position if mouse is down
  const onMouseMove = (event) => {
    if (pressed) {
      setPosition({
        x: position.x + event.movementX,
        y: position.y + event.movementY
      });
    }
  };

  return (
    <div className="App" style={Container}>
      <div style={{ display: "flex" }}>
        <h1 style={h1}>X</h1>
        <input className="inputC" style={inputC}  type="number" value={position.x} />
        <h1 style={h1}>Y</h1> 
        <input className="inputC" style={inputC}  type="number" value={position.y} />
      </div>
      <div
        style={{
          position: "absolute",
          top: "50%",
          left: "50%",
          transform: "translate(-50%,-50%)"
        }}
      >
        <div
          ref={ref}
          style={quickAndDirtyStyle}
          onMouseMove={onMouseMove}
          onMouseDown={() => setPressed(true)}
          onMouseUp={() => setPressed(false)}
          onMouseLeave={() => setPressed(false)}
        >
        </div>
      </div>
    </div>
  );
}

如何使当您用鼠标移动 div 时，它的左侧和顶部会立即显示？

        var div = document.getElementById('circle');
        var listener = (e) => {
          div.style.left = e.pageX - 50 + "px";
          div.style.top = e.pageY - 50 + "px";
        };
        
        circle.addEventListener('mousedown', e => {
            document.addEventListener('mousemove', listener);
        });
        
        circle.addEventListener('mouseup', e => {
            document.removeEventListener('mousemove', listener);
        });
        console.log(div)

        .block1 {
          width: 100px;
          height: 100px;
          position: absolute;
          left: 50px;
          top: 50px;
          border-radius: 50%;
          background: blue;
        }

    <html lang="en">
    <body>
      <div class="block1" id="circle"></div>
    </body>
    </html>

帮我修复错误，然后我一直坐着我无法修复什么时间。

<body> 
    <script src="assets/js/multilingualismConrol.js"></script>
    <header class="header" id="header" style=" margin-top: -50px;">
        <div class="nav_menu-container">
            <ul class="nav_menu">
                <li>
                    <a class="lng-au shadow" id="aboutus" href="#">aboutus</a>
                </li>
                <li>
                    <a class="projects" id="projects" onclick="document.querySelector('.projects_container').scrollIntoView()">projects</a>
                </li>
                <li>
                    <a class="skill" id="skill" onclick="document.querySelector('.skill_container').scrollIntoView()">skill</a>
                </li>
                <li>
                    <a class="contacts" id="contacts" onclick="document.querySelector('.contacts_container').scrollIntoView()">contacts</a>
                </li>
            </ul>
            <div class="topmenu" id="op">
                <div class="translate">
                    <a class="submenu-link">
                        <img class="open-tran" src="assets/img/planetsphere_1220461.png" alt="">
                    </a>
                    <ul class="submenu">
                        <li>
                            <a class="translate" id="e-lang-en">
                                <img style="width: 40px; height: 40px; border-radius: 30px" src="assets/img/united-states.png" alt="">
                            </a>
                        </li>
                        <li>
                            <a class="translate" id="e-lang-ru">
                                <img style="width: 40px; height: 40px; border-radius: 30px;" src="assets/img/russia.png" alt="">
                            </a>
                        </li>
                        <li>
                            <a class="translate" id="e-lang-ua">
                                <img style="width: 40px; height: 40px; border-radius: 30px;" src="assets/img/ukraine.png" alt="">
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
    </header>
    <main class="main_content">
    </main>
    <footer class="footer">
    </footer>
    <script src="assets/js/multilingualismTranslate.js"></script>
</body>

<script>
    let txt = {
        en: {
        'aboutus':'• about us',
        'projects':'• projects',
        'skill':'• skill',
        'contacts':'• contacts'
        } ,ru: {
        'aboutus':'• о нас',
        'projects':'• проекты',
        'skill':'• скилы',
        'contacts':'• контакты'
        } ,ua: {
        'aboutus':'• про нас',
        'projects':'• проекти',
        'skill':'• скіли',
        'contacts':'• контакти'
        }
      };
    
    
    const langEn = document.getElementById('e-lang-en');
    const langRu = document.getElementById('e-lang-ru');
    const langUa = document.getElementById('e-lang-ua');
    
    langEn.addEventListener('click', setLang.bind(null, 'en'));
    langRu.addEventListener('click', setLang.bind(null, 'ua'));
    langUa.addEventListener('click', setLang.bind(null, 'ru'));
    
    function setLang(lang){
        var e;
        if(!txt.hasOwnProperty(lang)) return;
        if(window.hasOwnProperty('localStorage'))
          window.localStorage.setItem('lang', lang);
         for(e in txt[lang]) {
          document.getElementById(e).innerText = txt[lang][e];
        }
      }
       
      var lang = (window.hasOwnProperty('localStorage') && window.localStorage.getItem('lang', lang)) || 'ru';
      setLang(lang);