小编Dac*_*nny的帖子

我试图在悬停伪元素时触发 CSS 动画。

我目前有 2 个视频，根据鼠标悬停在浏览器的哪 50% 侧显示，我想应用类似的效果来为某些文本设置动画。

我希望<p>标签向上移动并淡入，同时<h1>以相同的方式向上移动标签，就像这个网站：

https://seedlipdrinks.com/uk/

这是我正在为我的<p>和<h1>标签使用的结构类型：

<div class="caption_overlay">
    <div class="caption_grid">
      <div class="live_caption">

        <h1>A mix of apartments and terrace homes</h1>

        <a href="#"><p>Explore</p></a>

        </div>

        <div class="eat_caption">

        <h1>A brand new public eat street</h1>

        <a href="#"><p>Explore</p></a>

      </div>

    </div>    
</div>

CSS

视频的当前代码

.video_hover {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.video_hover::before {
  content:"";
  display:block;
  width:50%;
  height:100%; 
  position: absolute;
  top: 0;
  z-index:100;
}

.video_hover video {
  display:block;
  width: …

我有数组selectedItems，当我尝试更新现有对象时：

i.e. [{lable: "one", uniqueId: 1}, {lable: "two", uniqueId: 1}] 

至：

i.e. [{lable: "one", uniqueId: 1}, {lable: "two", uniqueId: 3}]

它将整个数组替换为：

 [ { lable: "two", uniqueId: 3 }]

我该如何避免呢？

handleChange = (label, uniqueId) => {
  const { selectedItems } = this.state
  const findExistingItem = selectedItems.find((item) => {
    return item.uniqueId === uniqueId;
  })

  if(findExistingItem) {
    selectedItems.splice(findExistingItem);
    this.setState(state => ({
      selectedItems: [...state.selectedItems, {
        label, uniqueId
      }]
    }))
  } else {
    this.setState(state => ({
      selectedItems: [...state.selectedItems, {
        label, uniqueId
      }]
    })) …

为什么我无法映射对象数组。我以前使用过这个地图，但它似乎在这个组件中不起作用。知道出了什么问题吗？

import React, { Component } from "react";

class Home extends Component {

    constructor(props) {
      super(props);
      this.state = {
         people: [
           {name:"a", age: 21}, 
           {name:"b", age: 22}, 
           {name:"c", age: 23}
         ]
       }
      this.clickListnerHandler = this.clickListnerHandler.bind(this)
     }

     clickListnerHandler(e){
       console.log(this.state.people)
     }

   render(){
     return (
       <div>
           {this.state.people.map((detail, index) => 
              {detail.name}
           )}
         <button
            onClick={this.clickListnerHandler}
            type="button" >Click on me</button>
       </div> 
      )
    }
  }

 export default Home

我怎样才能alert()允许用户输入他们的名字，并将其保存到状态？

这是我迄今为止尝试过的：

render: function() {
    return (
      <div>
        <input type="text" onChange={ this.handleChange } />
        <Button>Save</Button>
      </div>
    );
  }
}

说我有一个对象：

myObj = { 
  name: 'Luke',
  age: 12,
  height: '163cm',
  weight: '60kg',
  others: { one: '1', two: '2', three: '3'} // (Edited) Added one more key here :)
};

我想要此对象的副本，但不具有指向新对象的某些键，其输出方式如下：

newObj = { 
      name: 'Luke',
      age: 12,
      one: '1',
      two: '2'
    };

我已经看到了破坏的例子，但是我想知道嵌套对象是否有可能。使用解构是否可以实现这样的目的，否则，将是最有效的方法吗？

我想从一个立方体开始用 THREE.js 建造一个房间。到目前为止我有以下代码：

function loadModelcube() {
    console.log("Inside the function");
    cube.traverse( function( node ) {
    if( node.material ) {
        node.material.side = THREE.DoubleSide;
        }
    });
    scene.add( cube );
}

var geometry = new THREE.BoxGeometry(100,50,100);
var material = new THREE.MeshBasicMaterial({color: 0xff4444, wireframe: false}); 
cube = new THREE.Mesh(geometry, material);

var managercube = new THREE.LoadingManager( loadModelcube );

使用上面的代码，立方体并不像预期的那样可见。另外，我没有看到控制台日志记录按预期打印出来（即由于loadModelcube()调用了函数）。有谁知道出了什么问题？

所以我在 React 中玩弄并尝试制作一个应用程序，您可以在其中显示和修改组件状态中的任何属性，从组件本身。基本上，您输入一个键（例如"foo"），然后应用程序会将该键（例如this.state["foo"]）的当前值加载到文本区域中，您可以在其中修改该值。

这是沙箱：https : //codesandbox.io/s/twilight-bird-6z6cx这是沙箱中 使用的代码：

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class App extends React.Component {
  state = {
    inputVal: ""
  };
  onKeyInputChange(e) {
    this.setState({ key: e.target.value });
  }
  onValInputChange(e) {
    this.setState({ [this.state.key]: e.target.value });
  }
  render() {
    return (
      <div className="App">
        <div>
          key: <input onChange={this.onKeyInputChange.bind(this)} />
        </div>
        <div>
          value:
          <textarea
            onChange={this.onValInputChange.bind(this)}
            value={this.state[this.state.key]}
          />
        </div>
        <h2>key: {this.state.key}</h2>
        <h2>value: {this.state[this.state.key]}</h2>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App …

我可以使用基于const的反应组件.

const MyComp = (prop) => ... etc

在其中我有一些JSX:

<div id="myDiv">
        Stuff Here
</div>

我有一个目前真正称为myprop的道具.

所以我想添加一个条件myDiv ...例如:

<div id="myDiv" {if myprop === true}>
        Stuff Here
</div>

因此只有在道具是真的时才会显示div.

我如何在React中执行此操作？

我有一个像这样的组件层次结构：

<parent>
   <someWrapper1>
        <child>
        <child>
   <someWrapper2>
       <child>
       <child>

每个子组件自己处理一堆鼠标事件，其中一些是 D3 包装器管理onDragStart和onClick鼠标事件。

我正在寻找一种方法来根据父组件的状态禁用<someWrapper1/>、<someWrapper2/>组件以及组件中的所有鼠标事件<child/>。

一种解决方案是将 disable 的 prop 传递给包装器组件，并将它们传递给每个子组件，然后传递给每个处理程序以禁用或启用鼠标事件。我想避免这种情况，因为它很难维护。

我正在寻找一个更好的解决方案，我可以在其中禁用父组件中所有组件中的所有鼠标事件。

谢谢！

我试图将a <div>放置在用户文本选择上方，该文本选择将充当类似于Mediums的工具栏。

虽然我已经成功<div>地将定位在选择旁边，但是我似乎无法使它相对于选择正确居中：

    $(function() {
      // Setup the Event Listener
      $('.article').on('mouseup', function() {
        // Selection Related Variables
        let selection = window.getSelection(),
        getRange      = selection.getRangeAt(0),
        selectionRect = getRange.getBoundingClientRect();

        // Set the Toolbar Position
        $('.toolbar').css({
          top: selectionRect.top - 42 + 'px',
          left: selectionRect.left + 'px'
        });
      });
    });

我可以这样确定选区的中心点：减去选区的宽度，使选区从视口向左偏移：

 selectionRect.left - selectionRect.width

但是，我不确定如何使用它来设置工具栏相对于选择矩形居中的位置吗？

我尝试从选择的宽度除以2减去工具栏的左偏移量，但这也不完全与中心对齐。

JSFiddle

https://jsfiddle.net/e64jLd0o/