小编Yus*_*ick的帖子

我知道这是一个简单的问题,但由于某种原因,这对我不起作用.每次更改下拉菜单时,我都会触发一个功能.以下是相关代码,用于获取文本字段的当前值,如果存在值,则清除.change函数中包含的内容:

var doc_val_check = $('#doc_title').attr("value");
    if (doc_val_check.length > 0) {
        doc_val_check == "";
    }

我觉得我错过了很简单的事情.

当我正在深入研究React时,我发现需要路由器.我跟随Wes Bos的视频系列,但是当我尝试访问除了root之外的任何路径时,我遇到了麻烦.

import ReactRouter from 'react-router';
var Router = require('react-router').Router;
var Route = require('react-router').Route;
var Link = require('react-router').Link;
var createBrowserHistory = require('history/lib/createBrowserHistory');

然后我的路由器

var routes = (
  <Router history={createBrowserHistory()}>
    <Route path="/" component={LoginPage} />
    <Route path="/dashboard" component={Dashboard} />
    <Route path="/search" component={SearchPage} />
    <Route path="/details" component={DetailsPage} />
    <Route path="*" component={LoginPage} />
  </Router>
);
ReactDOM.render(routes, document.getElementById('content'));

但是,如果我转到localhost:3000 /仪表板,我会收到错误消息:

Cannot GET /dashboard

有什么建议？

我有一个使用Create-React-App创建的项目.我希望添加一个precommit钩子来运行我们的linter并测试pre-commit包.

"pre-commit": [
  "precommit-msg",
  "lint",
  "test"
],

但是,由于测试脚本默认在监视模式下运行,因此可以防止提交实际发生.如何在预提交中添加不在监视中移动的测试？

我试图将一组参数传递给Snap SVG中的animate函数,包括一个回调函数.但是,回调(在这种情况下是删除元素)会在单击时立即触发,而不是在动画完成后触发.就像现在一样,元素被删除,然后animate函数出错,因为元素不再存在.有任何想法吗？

    var theCallback = theApp.destroyAnElement("#"+ theParentID); 

//The function call
theAnimationFunctions.animateSingleSVGElementWithSnap('.stopped','#svg-container',{transform: 's1,0'}, 500, mina.backin, 0,0,theCallback);

// The animate function
    animateSingleSVGElementWithSnap: function(element, parentSVG, animationValues, duration, easing, initialDelay, callback) {
       var s = Snap.select("#"+ parentSVG),
           theElement = s.select(element);

       setTimeout(function() {
         theElement.stop().animate(animationValues, duration, easing, function() {
             callback;
         });
      }, initialDelay);
    }

UPDATE

theCallback = function () { theApp.destroyAnElement("#"+ theElementID); };

theAnimationFunctions.animateSingleSVGElementWithSnap('.stopped','#svg-container',{transform: 's1,0'}, 500, mina.backin, 0,0,theCallback);

theAnimationFunctions = {
    animateSingleSVGElementWithSnap: function(element, parentSVG, animationValues, duration, easing, initialDelay, callback) {
    var s = Snap.select("#"+ parentSVG),
    theElement …

我正在使用Velocity在屏幕上翻译元素.完成后,我希望元素返回其原点并循环动画,绕过循环时发生的默认反向效果.

我有我的标准动画功能,我传递了我的值:

$(element).delay(initialDelay).velocity(animationValues, {duration: duration, easing: easing, loop: loop, complete: function() {
   callback();
}});

有没有办法通过翻译元素而不是旋转元素来实现此功能？

我一直在做很多修修补补,似乎无法让它发挥作用.我希望在等待我的模型承诺返回时显示我的加载模板.

我的理解是,默认情况下,如果我有app/templates/loading.hbs,这个模板将在所有路线上呈现.然而,即使我在路线之间切换时使用该模板,旧路线仍会显示,直到模型返回,此时我的液体火焰转换发生并且您将被带到下一条路线.

我已经尝试了为每个路由创建嵌套加载模板的各种版本,尝试为加载模板的每个路由创建子路由,甚至搞乱了可用的beforeModel/afterModel方法,但我没有进展.这是我在发布之前想要跨越的最后一个障碍,并且为什么我无法使其工作感到困惑.这是我觉得相关的一堆代码.

注意:我使用的是Ember CLI和Liquid Fire.我的数据也暂时从Ember Service返回到模型.

路由器

Router.map(function() {
  this.route('reviews', function() {
    this.route('index', {path: '/'});
    this.route('review', {path: '/:review_id'});
  });
  this.route('movies');
  this.route('about');
});

应用程序/模板/ loading.hbs

<div class="content-container">
    <h1>Ish be loading</h1>
</div>

最慢的模型路线

export default Ember.Route.extend({
    activate() {
        this._super();
        $("html,body").animate({scrollTop:0},"fast");
        $("body").addClass('movies');
    },
    deactivate() {
        $("body").removeClass('movies');
    },
    model() {
        const movies = this.get('movies');
        return movies.getMoviesInAlphOrder();
    },
    afterModel: function() {
        $(document).attr('title', 'Slasher Obscura - Movie Database');
    },
    movies: Ember.inject.service()
});

app.js

App = Ember.Application.extend({
    modulePrefix: config.modulePrefix,
    podModulePrefix: config.podModulePrefix,
    Resolver,
    ...
}); …

我正在使用TypeScript和React。在我的组件（即对话框窗口）中，我想将触发元素（例如按钮）存储为属性。当组件卸下时，我想将焦点返回到该元素。但是，我从TSLint收到一个错误，我不确定如何解决。

class Dialog extends React.Component<Props, {}> {
  ...
  focusedElementBeforeDialogOpened: HTMLInputElement;

  componentDidMount() {
    this.focusedElementBeforeDialogOpened = document.activeElement;
    ...
  }
  ...
}

我在分配属性值的行上收到错误：

[ts] Type 'Element' is not assignable to type 'HTMLInputElement'.
  Property 'accept' is missing in type 'Element'.

但是，如果我将属性的类型更改为，Element甚至HTMLInputElement收到错误消息，componentWillUnmount()

componentWillUnmount() {
    ...
    this.focusedElementBeforeDialogOpened.focus();
}

此错误是关于没有focus()方法的元素类型。

题

有没有办法告诉TypeScript document.activeElement应该是输入类型？就像是

this.focusedElementBeforeDialogOpened = <HTMLInputElement>document.activeElement;

还是有更好的方法解决这个问题，所以声明同时支持document.activeElement和的类型.focus()？

我目前正在运行React 16.3.1和Styled Components 3.2.5，遇到尝试使用React.forwardRef的问题。

我有一个Input组件，由包含标签和输入字段的包装div组成。但是，我希望能够将ref直接转发到输入字段，而不必通过主包装div遍历。

const Input = React.forwardRef((props, ref) => (
  <Wrapper>
    <Label htmlFor={props.id} required={props.required}>
      {props.label}
    </Label>

    <InputField
      id={props.id}
      ...
    />
  </Wrapper>
));

那是我组件的简化版本。但是，这会产生以下错误：

Uncaught Error: Cannot create styled-component for component: [object Object]

也许将样式化组件升级到v4会有所帮助？但是，在升级之前，我还没有找到任何解决方案吗？

谢谢。

我正在学习一些有关捆绑的知识，因为我正在努力更新一个使用Rollup的小型内部React组件库。

当前状态

现在，所有组件都被捆绑到一个index.js文件中。每当我导入一个或多个...

import { Button, Input } from 'my-library';

...整个库正在导入。我想解决这个问题。

此时，我已经更新了汇总以创建命名的组件文件，因此可以执行如下导入：

import Button from 'my-library/Button';

当我只使用一个组件时，这很好，但是每当我需要一个以上组件时，例如必须从同一库中导入五行，就会感到多余。但是，每当我再次尝试对其进行分解时，整个库都将被导入。

目标

我希望能够从上面运行相同的经过结构分解的import语句，但只能导入这两个组件。

rollup.config

export default {
  experimentalCodeSplitting: true,
  input: [
    'src/index.js',
    'src/components/Button/Button.js',
    'src/components/Input/Input.js',
  ],
  output: {
    exports: 'named',
    dir: 'dist/',
    format: 'cjs',
    chunkFileNames: 'chunks/[name]-[hash].js',
  },
  plugins: [
    external(),
    babel({ exclude: 'node_modules/**', plugins: ['external-helpers'] }),
    resolve(),
    commonjs(),
  ],
};

index.js

import Button from './components/Button/Button';
import Input from './components/Input/Input';

exports.Button = Button;
exports.Input = Input;

因此，这将产生两个文件，Button.js并Input.js为每个组件构建了一个很棒的文件。但是是否有可能在一条import …

我不知道该怎么称呼这个问题.这是我的目标:

在第一页上,我有一个从数据库生成的表单.它循环通过将计数变量分配给字段的id(即:header_1,header_2,header_3 ......)

现在,字段的数量可能会有所不同,因为我需要添加额外信息的能力(即:header_4,header_5).

当我提交表单时,如何为每个字段创建变量？

$header1 = $_POST['header_1']

本质上,我正在寻找一种基于数组(或基于变量的变量)的简化方法:

$sql="UPDATE about SET about_header = '$head1', about_content = '$post1' WHERE about_id = '$id1'";
$result = mysql_query($sql);
$sql="UPDATE about SET about_header = '$head2', about_content = '$post2' WHERE about_id = '$id2'";
$result = mysql_query($sql);
$sql="UPDATE about SET about_header = '$head3', about_content = '$post3' WHERE about_id = '$id3'";
$result = mysql_query($sql);

我想像这样的查询可以工作,但我不知道如何处理我需要帮助构建的信息数组.

$y=1;
$sql="UPDATE about SET about_header = '$head$y', about_content = '$post$y' WHERE about_id = '$id$y'";

我希望我解释得这么好.任何帮助都会很棒.谢谢!