小编Rob*_*t C的帖子

在分析网站后的网络下拉列表中，数据在数据前后显示细白线。这些细白线表示什么？

我希望每个按钮保留其独特的宽度（当前基于文本宽度），并且当水平方向没有更多空间时，按钮会自动放置在下一行中。

使用grid-auto-flow: column允许按钮保留其宽度，但随后它们不会换行。使用 grid-template-columns: repeat(auto-fill, minmax(1rem, 15rem))允许它们换行，但随后它们会失去各自的宽度。

Codesandbox：https://codesandbox.io/s/jovial-shannon-btp3x?file=/ src/styles.css

.grid {
  margin-top: 1rem;
  margin-left: 0.1rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(1rem, 11.3rem));
  max-width: 100%;
  grid-row-gap: 2.5rem;
  grid-column-gap: 2.5rem;
}

.button {
  padding: 1rem;
  outline: 1px solid rgba(110, 110, 110, 0.34);
  color: white;
  background-color: #1d1f1f;
  font-family: Calibri;
  font-size: 1.4rem;
  font-weight: bold;
}

<div class="grid">
  <button class="button">
        <span class="button-text">
          ab
        </span>
      </button>
  <button class="button">
        <span class="button-text">
          abcd
        </span>
      </button>
  <button class="button">
        <span class="button-text">
          abcdefg
        </span>
      </button>
  <button class="button">
        <span …

当您的 React 项目不是使用 create-react-app 构建并且没有后端时，设置 ENV 变量以在您的 React 项目中工作的过程是什么？

只是想让这些视频在鼠标悬停时播放。我可以从控制台看到我需要创建一个函数而不是使用字符串（其他SO答案使用字符串），那么如何在不创建太多额外代码的情况下做到这一点？理想情况下，我希望在 onMouseOver 和 onMouseOut 属性上设置正确的功能。

        <video \n          poster="https://i.imgur.com/Us5ckqm.jpg"\n          onMouseOver="this.play()" \n          onMouseOut="this.pause();this.currentTime=0;"\n          src={`${vid.videos.tiny.url}#t=1`}\n        </video>\n

也尝试过

        <video \n          poster="https://i.imgur.com/Us5ckqm.jpg"\n          onMouseOver={() => this.play()}\n          onMouseOut={() => this.pause()}\n          src={`${vid.videos.tiny.url}#t=1`} >\n        </video>\n

这给了我错误：无法读取未定义的属性“play”。

编辑不确定这是否相关，但上面的代码驻留在地图函数内，该函数也是 get 请求的一部分。这是完整的功能：

  const fetchVideos = async (amount, category) => {\n    const response = await axios.get(\'https://pixabay.com/api/videos/\', {\n      params: {\n        key: \'123456123456123456\',\n        per_page: amount,\n        category: category\n      }\n    })\n    console.log(response)\n    const vidsAsHtml = response.data.hits.map(vid => {\n      return (\n        <div className={`${props.page}--grid-content-wrapper`} key={vid.picture_id}>\n          <div className={`${props.page}--grid-video`}>\n            <video className=".video"\n              poster="https://i.imgur.com/Us5ckqm.jpg"\n              onMouseOver={() => …

我想将评论的键值更新为新值，同时保持其他键不变。我知道我可能需要展开运算符……但我不确定确切的语法。我需要在 setResource() 中放入什么来完成此操作？

const VideoPage = () => {
  const [state, setResource] = useState(
    {
      video: 'placeholder'
      loading: 'placeholder'
      comment: 'placeholder'
    }
  )
  const funct = () => {
    setResource()
  }
}

试图弄清楚为什么这里的 if 语句只在用户第二次按下某个键时运行。我试图让它从第一个键开始运行。

功能：

const commentFieldHasText = () => {
    const commentInput = document.querySelector('.add-comment')
    console.log('runs first keypress')

    if (commentInput.value) {
      console.log('only runs second keypress')
    }
  }

输入：

 <input 
   className="add-comment"
   placeholder="Add a public comment" 
   onKeyDown={() => commentFieldHasText()}
 />

附加信息： onKeyPress 也没有提供预期的功能。onKeyUp 确实如此。