小编Dac*_*nny的帖子

我用来IndexDB创建用户的对象存储，但在尝试添加用户时出现错误var request = db.transaction(['person'], 'readwrite')。

给出的错误是：

“未捕获的类型错误：无法在 test.js:45 处的 add (test.js:32) 处读取未定义的属性‘交易’”

我的脚本如下所示：

var request = window.indexedDB.open("connectDB", 1);

request.onerror = function (event) 
{
console.log('The database is opened failed');
};

var db;

request.onsuccess = function (event) 
{
    db = request.result;
console.log('The database is opened successfully');
};

var db;

request.onupgradeneeded = function (event) 
{
    db = event.target.result;
    var objectStore;
    if (!db.objectStoreNames.contains('users'))
    {
        objectStore = db.createObjectStore('users', { keyPath: 'id' });
        objectStore.createIndex('name', 'name', { unique: false });
        objectStore.createIndex('email', 'email', { …

我想添加占位符纹理以使用 ReactJS 选择输入，但是我目前的尝试无效。

我的代码如下所示：

<Input type="select" placeholder="placeholder">
     <option>First option</option>
     <option>second option</option>
     <option>Thrid option</option>
</Input>

在选择任何选项之前，我希望文本“占位符”显示在输入字段上，但默认情况下会显示“第一个选项”。

使用React，我具有以下功能组件useEffect()：

import React, { useEffect } from 'react';
import { connect } from 'react-redux';

const MessagingComponent = React.memo(({ loadMessages, messages, ...props }) => {

  useEffect(() => {
    loadMessages();
  });

  return <div {...props}>These are the messages</div>;
});

const mapDispatchToProps = dispatch => ({
  loadMessages: () => dispatch({ type: 'LOAD_MESSAGES' })
});

const mapStateToProps = state => {
  return {
    messages: state.chatt.messages.chatMessages
  };
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(MessagingComponent);

如您所见，我有一个效果回调，loadMessages()该useEffect()回调在my 的回调中调用该函数MessagingComponent：

  useEffect(() => …

要<input>使用 JavaScript设置元素的数据，我们像这样分配该元素的值和名称：

var form = document.createElement("form");
var element = document.createElement("input"); 
element.value=value;
element.name=name;

在的情况下<select>，其中的multiple属性存在，我怎么设置选择元素的值？例如，我将如何设置myselect下面元素的值：

<form method="post" action="/post/" name="myform">
  <select multiple name="myselect" id="myselect">
    <option value="1">option1</option>
    <option value="2">option2</option>
        ...

我试图通过这样做来设置值，myselect.value=[1,2]但它不起作用。选择后option1，option2我预计它会返回[1,2]，但它只返回“1”。

我可以让媒体查询在常规styled-components组件中正常工作，但是当我尝试在keyframe（通过 import from styled-components）中使用它时，它似乎根本不起作用。

试图让 div 动画到特定位置，但是当窗口 < 800px 时改变结束位置，我尝试过：

import styled, { keyframes } from 'styled-components';

// ... further down ...

const slideAnim = keyframes`
  100% {
    top: 20px;
    left: 30px;
  }

  @media (max-width: 800px) {
    top: 70px;
    left: 50px;
    }

`;

我还尝试将媒体查询放在100%块中：

const slideAnim = keyframes`
  100% {
    top: 20px;
    left: 30px;

    @media (max-width: 800px) {
       top: 70px;
       left: 50px;
    }
  }
`;

我对我想要实现的目标做了一个有用的交互式演示（问题代码在第 24 行）：https : //codesandbox.io/embed/fragrant-star-m71ct

breakpoint如果需要，请随意更改800 …

我正在用 JavaScript 制作一个小游戏。我创建了一个小示例js 小提琴演示链接。有以下三种情况：

• A：在目标物体之外。
• B：与目标对象的边界重叠。
• C：目标物体内部。

根据有对象检测是否完全在其他对象 JavaScript 中，我知道如何检测对象是否在目标内部（情况 C）。情况A和B怎么样？

<div class="main">
    <div class="target"></div>
    <div class="obj">A</div>
    <div style="top:15%; left:50%;" class="obj">B</div>
    <div style="top:25%; left:35%;" class="obj">C</div>
</div>

我正在查看这个问题帖子，但在将其应用到我的代码中时遇到问题。

这让我感到困惑，因为我对“保存”按钮执行的操作与“取消”按钮完全相同（至少是有关其关闭的部分），并且单击“取消”后没有任何反应。

<dialog class="my-modal"> 
                <p>Add Cust</p>
                <label for="nameField">Name</label><input id=nameField><br>
                <label for="addressField">Address</label><input id=addressField><br>
                <label for="cityField">City</label><input id=cityField><br>
                <label for="stateField">State</label><input id=stateField size=2> &nbsp;
                <label for="zipField">Zip</label><input id=zipField><br>

                <br>
                <button onclick="closeAndSave()">Save</button>
                <button onclick="close()">cancel</button>
            </dialog>

function close(){
    const modal = document.querySelector('.my-modal');
    modal.close();
}

也尝试过：

<button class="btn btn-default" data-dismiss="my-modal" aria-label="Close">Cancel</button>

我创建了一个简单的模式对话框，如下面的代码所示，该对话框将用于在Web表单的某些位置添加帮助。

我想添加一个滑动动画效果，以使对话框在模式打开时滑入屏幕，并在模式关闭时滑回屏幕：

我找不到想要实现的解决方案。我的模态代码当前如下所示：

function openModal(mod_name){
  var modal = document.getElementById(mod_name);
  modal.style.display = "block";
  window.onclick = function(event) {
    if (event.target == modal) {
      modal.style.display = "none";
    }
  }
}
function closeModal(mod_name){
  var modal = document.getElementById(mod_name);
  modal.style.display = "none";
}

<style>
  body {font-family: Arial, Helvetica, sans-serif; background-color: red; }
  .modal { display: none; position: fixed; z-index: 1; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(255,255,255,0.8); }
  .modal-content { margin: auto; padding: 20px; width: 80%; }
  .close { …

我有这样的 HTML 结构：

<body>
  <nav>
     <!--navigation elements -->
  </nav>
  <div className='main'>
     <!--other elements -->
  </div>
  <div className='container'></div>
</body>

路由定义如下：

<Router>
  <Fragment>
    <Navbar />
    <Route exact path="/" component={Landing} />
    <div className="container">
       <Alert />
       <Switch>
           <Route exact path="/register" component={Register} />
           <Route exact path="/login" component={Login} />
           <Route exact path="/profiles" component={Profiles} />
       </Switch>
    </div>
  </Fragment>
</Router>

“容器”元素存在于所有路由上，但我不希望它在“/”路由上呈现。

我怎样才能停止<div className="container">在"/"路线上被渲染？我希望它在除"/".

我发现但不想使用的解决方案class="container"是在我的<Switch>. 有没有更好的办法？

我有数组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
      }]
    })) …