标签: frontend

每个人。我仍然习惯于 React 和 React Router，这是我不知道的一件事。

所以，我有一个同时播放视频（静音）和音轨的应用程序。我正在使用React Player来播放两者。我的观点是这样的（VideoPlayer 是 react-player 标签）：

<div>
    <VideoPlayer url={this.props.audio} playing={this.state.playing} />
    <VideoPlayer url={this.props.video} playing={this.state.playing} />
</div>

这个设置对我有用，我能够通过一个共同的状态来播放和控制它们。我可以通过连接到按钮的事件处理程序阻止它们：

handleStop() {
    this.setState({playing: false})
}

这也有效。

然而，问题是，一旦我导航到不同的路线，音频（可能还有视频）仍然在后台播放。实际上，让我换个说法，当我更改路线时，音频会在后台重新启动。

从 react-router docs阅读此页面后，我尝试包含调用handleStop各种生命周期事件的逻辑，但没有一个能成功。到目前为止，我试图把调用handleStop的componentWillReceiveProps，componentWillUpdate，componentDidUpdate和componentWillUnmount。

我得到的最接近的是将调用放入componentWillUnmount，但我总是收到关于设置未安装组件状态的错误（这也没有意义，如果在卸载之前调用？）。

那么，有没有人知道在哪里打电话给handleStop？

提前致谢。

我需要从来自后端的特定日期获取年份、月份和日期。我怎样才能在前端控制器上做到这一点？

谢谢！

在 bootstrap 网格系统中，有 12 列， col - *- * 类用于将一定数量的列组合在一起。但是当我想使用前 3 列然后只使用最后一列时，我该怎么做，也就是说，如何在单行类中使用某些列而不是其他列？

就像我制作页眉时，我在左侧给出标题，在页眉右侧给出某些其他文本，我假设我可以在这里有效地使用网格系统，因为我可以访问某些列。

如何更改 UIkit 图标的颜色。我正在使用反应组件。具体来说，我想改变分隔线图标的颜色：https : //getuikit.com/docs/divider

我已经尝试了这个问题的大部分答案：Can I change the color of Font Awesome's icon color? 他们都没有工作。

我也尝试将它包装在标签中或

<i style={{color: 'rgba(0, 0, 0, 1)'}} className="uk-divider-icon"></i>
<div style={{color: 'rgba(0, 0, 0, 1)'}} className="uk-divider-icon"></div>

我想更改图标本身的颜色而不是背景或其他 css，因为使用style.

谢谢。

我正在尝试创建一个相当基本的指令，它可以根据用户权限隐藏（从 DOM 中删除）、显示或显示和禁用其中的内容。

根据角度指南，我应该能够做类似的事情来修改指令中的内容。

import { Directive, ElementRef } from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
    constructor(el: ElementRef) {
       el.nativeElement.style.backgroundColor = 'yellow';
    }
}

但是，我在访问指令的内部内容时遇到问题。这需要是一个结构指令，以便能够从 DOM 中删除内容，但是当我将其设为结构指令时，ElementRef 仅返回包含 ng 绑定的 HTML 注释元素，它不会返回实际内容。

当我将此作为非结构指令进行测试时，它返回实际内容。

如何访问结构指令的内部内容？

免责声明：我是一名后端程序员，我希望尽量减少网页中的 javascript 代码。

我正在考虑使用此处给出的登录表单作为示例。在这个例子中，我们有这个

<form class="ui large form">
  <div class="ui stacked segment">
    <div class="field">
      <div class="ui left icon input">
        <i class="user icon"></i>
        <input type="text" name="email" placeholder="E-mail address">
      </div>
    </div>
    <div class="field">
      <div class="ui left icon input">
        <i class="lock icon"></i>
        <input type="password" name="password" placeholder="Password">
      </div>
     </div>
     <div class="ui fluid large teal submit button">Login</div>
  </div>
  <div class="ui error message"></div>
</form>

登录按钮只是一个什么都不做的 div。表单标签中没有动作参数，也没有提交类型输入标签。

如何让页面将输入字段值发送回后端服务器？

请注意，在源页面中可以看到一些 javascript 代码，用于检查字段的有效性。但是没有关于如何将电子邮件和密码发送到后端并加载登录页面的提示。

slug我的 TCA 中有字段，通常它可以工作，当通过后端> 列表模块添加时，即使我不会输入任何值，uniqueeval 也确保 slug 是唯一的，因此当我创建许多具有相同名称的行时富TYPO3后台将enshure，这将解决以独特的蛞蝓一样foo，foo-1，foo-2等荣誉!:

'slug'       => [
    'exclude'     => true,
    'label'       => 'Slug',
    'displayCond' => 'VERSION:IS:false',
    'config'      => [
        'type'              => 'slug',
        'generatorOptions'  => [
            'fields'         => ['name'],
            'fieldSeparator' => '/',
            'replacements'   => [
                '/' => '',
            ],
        ],
        'fallbackCharacter' => '-',
        'eval'              => 'unique',
        'default'           => '',
        'appearance'        => [
            'prefix' => \BIESIOR\Garage\UserFunctions\SlugPrefix::class . '->getPrefix'
        ],
    ],
],

但是，当从我的表单中的new/create操作（如您所见，来自 extension_builder 的典型 …

我在看这个文件：https : //rxviz.com/examples atpause-and-resume

在第 10 行中，它与以下内容相同：

pauseResume$.pipe(

有谁知道这是什么意思？

我得到这个指定的值“NaN”无法解析或超出范围。我的控制台出现错误，我是 javascript 新手，我无法解决这个问题，有点帮助会很好。

我正在与您分享我的脚本部分；

 <script language="JavaScript">
  
  function quad() {
  
  a=eval(document.form.A.value);
  
  b=eval(document.form.B.value);
  
  c=eval(document.form.C.value);
  
  x1=-b/2/a+Math.pow(Math.pow(b,2)-4*a*c,0.5)/2/a;
  
  x2=-b/2/a-Math.pow(Math.pow(b,2)-4*a*c,0.5)/2/a;

  if (x1 == "NaN") x1="Imag.!";

  if (x2 == "NaN") x2="Imag.!";
  
  document.getElementById("ans-1").value = x1;
  
  document.getElementById("ans-2").value = x2;
  
  }
  
  // End -->
  
  </script>

我一直在尝试在基于 html 的 Web 应用程序上使用多个“显示更多”按钮。为此，我尝试了不同的 JS 函数，但我在某处出错了。目前，只有一个“显示更多”在工作。我的代码如下。请帮我解决此代码的正确解决方案。

function myFunction6() {
  var dots = document.getElementById("dots6");
  var moreText = document.getElementById("more6");
  var btnText = document.getElementById("button6");
  //   var btnText1 = document.getElementById("button6");

  if (dots.style.display === "none") {
    dots.style.display = "inline";
    btnText.innerHTML = "Show more";
    // btnText1.innerHTML = "Show more"; 
    moreText.style.display = "none";
  } else {
    dots.style.display = "none";
    btnText.innerHTML = "Show less";
    // btnText1.innerHTML = "Show less"; 
    moreText.style.display = "inline";
  }
}

#button6 {
  border: none;
  outline: 0;
  display: inline-block;
  padding: 8px;
  color: white;
  background-color: …