小编Sub*_*aik的帖子

在我的应用程序组件（简单的一个）中，我创建了一个带有 3 个输入字段和 1 个提交按钮的表单。当用户填写表单并单击提交按钮后，表单数据将显示在页面上。

现在，我的问题是，从 访问表单元素节点时出现打字稿错误 event.target.elements。

TypeError: Property 'elements' does not exist on type 'EventTarget'.

我尝试通过将其event.target类型转换为 HTMLInputElement 来解决此问题，但错误仍然存​​在。

function handleSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();

    const { firstName, lastName, company } = (event.target as HTMLInputElement).elements;
    setFormData({
      firstName: firstName.value,
      lastName: lastName.value,
      company: company.value
    });
  }

当我使用上面的代码时出现错误消息

TypeError: Property 'elements' does not exist on type 'HTMLInputElement'.

沙盒链接

我刚刚开始学习 Flexbox 布局并实现了一个示例，但当我为 Flexbox 容器设置边距 20px 时，我陷入了困境。顶部、左侧和右侧边距按预期工作，但我不知道底部边距是否未意外设置。

我已将容器的高度设置为 100%，其父级（body 元素）的高度也是 100%。

不过，当我将正文的内边距设置为 20 像素并从容器中删除 20 像素的边距时，效果很好。

只是想了解这种行为。

为什么边距在这里不起作用，而是填充？

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body {
  background: #011627;
  height: 100%;
}

.container {
  margin: 20px;
  border: solid 2px #f9f871;
}

.container > div:nth-child(odd) {
  padding: 10px;
  background: #ff6a67;
}

.container > div:nth-child(even) {
  padding: 10px;
  background: #007277;
  color: azure;
}

/* overwrite css */
.container {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center; …

我试图接受一个对象并将其转换为数组，以便我可以使用 map 函数在我的 React 应用程序中呈现它。我发现有两种方法可以将对象转换为数组，一种是使用Array.from(object)，另一种是Object.values(object). 当我使用第二种方法时，我的 React 应用程序运行良好。但是如果我使用第一种方法，我会得到一个空数组，但是当我控制台记录数组的长度时，它显示了数组的实际长度，在我的情况下为 3。此外，undefined在我的情况下，值存储在数组中。

请找到以下代码段。

const Example = () => {

let object = {
  productName : "Desktop",
  quantity: 2,
  price: 4000,
  length:3
};

let arr = Array.from(object);

console.log(arr.length);
console.log(arr);

  return ( 
          <div>
              <ul>                  
                {arr.map((item,k) => <li key={k}>{item}</li>)}
              </ul> 
          </div>
         );
};

ReactDOM.render(
    <Example />,document.getElementById("react")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>

我有一个变量，并使用它来创建一个具有 class 属性的 HTML 元素：

var my_class="my_class";
$(this).after("<div class="+my_class+"></div>");

我得到<div class="my_class"></div>了预期的结果，但是当添加一个带有空格的变量时：

var my_class="my_class id";
$(this).after("<div class="+my_class+"></div>");

我得到<div class="my_class" id></div>而不是<div class="my_class id"></div>. 我怎样才能改变它？