小编Gar*_*lak的帖子

为什么我们不能在Boact中将布尔值作为道具传递,它总是要求在我的代码中传递字符串

即使我已经应用了propType验证,我的编辑器在为hasvacancyprop 传递布尔值时会抛出错误.这是我所看到的:

错误:'SyntaxError:JSX值应该是表达式或带引号的JSX文本'

我知道我正在传递'hasvacancy'prop的字符串类型值,但是我需要做什么,所以我可以通过prop传递布尔值或其他数据类型.

import React from 'react';
import { render } from 'react-dom';


class VacancySign extends React.Component{

  render() {
    console.log('------------hasvacancy------', this.props.hasvacancy);
    if(this.props.hasvacancy) {
      return(
        <div>
          <p>Vacancy</p>
        </div>
      );
    } else {
      return(
        <div>
          <p>No-Vacancy</p>
        </div>);
    }

  }
}

VacancySign.propTypes ={
  hasvacancy: React.PropTypes.bool.isRequired
}

render(<VacancySign hasvacancy='false'/> , 
document.getElementById('root'));
Run Code Online (Sandbox Code Playgroud)

reactjs redux

54
推荐指数
3
解决办法
5万
查看次数

python csv到字典使用csv或pandas模块

我正在使用 Pythoncsv.DictReader从 CSV 文件中读取值以创建一个字典,其中键是 CSV 中的第一行或标题,其他行是值。它按预期完美运行,我可以获得字典,但我只希望某些键在字典中,而不是所有列值。做这个的最好方式是什么?我试过使用,csv.reader但我认为它没有这个功能。也许这可以使用熊猫来实现?

这是我在 CSV 模块中使用的代码,其中Fieldnames我想在字典中保留的键。我意识到它不适用于我上面描述的内容。

import csv
with open(target_path+target_file) as csvfile:
    reader = csv.DictReader(csvfile,fieldnames=Fieldnames)
    for i in reader:
        print i
Run Code Online (Sandbox Code Playgroud)

python python-2.7 pandas

6
推荐指数
2
解决办法
2万
查看次数

使用JQuery/Javascript获取组合上传文件的总大小

我有一个用户可以上传文档的页面.还有一个按钮可以添加更多文档(如图所示).

Dynamicaly添加了上传点

添加上传按钮后

我想检查已从上传部分添加或删除的每个文件,以确保大小不超过10 MB.

因此,如果用户上传3个单独的2 MB文件,然后添加一个5 MB的文件,则提交按钮将被禁用,直到其中一个文件被删除,因为它超过了10 MB的限制.

可以动态添加行,因此我按类进行操作并尝试将运行总计相加.

这是我到目前为止所提供的,可在JFIDDLE获得

<form class="upload-form">
  <input class='upload-file' type="file" id="upload0">
  <input class='upload-file' type="file" id="upload1">
  <input class='upload-file' type="file" id="upload2">
  <input class='upload-file' type="file" id="upload3">
  <input id='submitBtn' type=submit>
</form> 
Run Code Online (Sandbox Code Playgroud)

问题是,如果我添加一个文件然后删除它,它就不会反映当前的运行总数.

$("document").ready(function() {

  var fileArr = [];

  $(".upload-file").on('change',function() {
    var fileInput = $('.upload-file');

    var fileSize = fileInput.get(0).files[0].size;
    fileArr.push(fileSize);

    var totalSize = 0;

    for (var i in fileArr) {
      alert(fileArr[i]);
      totalSize = totalSize + fileArr[i];             
    }

    if (totalSize > 10485759) {
      alert('Over Max Size');
      $(submitBtn).prop("disabled",true);
    }

  });
});
Run Code Online (Sandbox Code Playgroud)

我也尝试过这种方式,但是在删除文件时无法重置. …

html javascript jquery

5
推荐指数
1
解决办法
1779
查看次数

Vue.js:根据方法对列表进行排序

我正在获取一些原始数据并显示一个项目列表.每个项都有一个复杂的属性,我用一个方法生成(它不是一个计算属性).该属性可能会因用户输入而改变.是否可以根据该属性对列表中的项目进行排序?

HTML:

<ul>
  <li v-for="item in items">
    <span>{{ calculateComplexProperty(item.time) }}</span>
  </li>
</ul>
Run Code Online (Sandbox Code Playgroud)

JavaScript的:

calculateComplexProperty: function (time) {
  // this.distance is an external factor that is not a property of the list item, 
  // and that can be manipulated by the user
  var speed = time * this.distance;

  return speed;
}
Run Code Online (Sandbox Code Playgroud)

因此,每个项目都有一个由全局动态因子"距离"操纵的时间值.这个想法是每当"距离"改变时自动对项目进行排序,并且还更新"速度"属性.这可能吗?

javascript sorting vue.js v-for

5
推荐指数
1
解决办法
1864
查看次数

使用 react 更改文本输入的焦点

我的目标是创建一个表单,当您按回车键时,它会将您切换到下一个输入元素,并在您进行最后一个输入时提交表单。

这是为移动设备构建的,因为在浏览器中没有使用“下一步”按钮而不是“转到键盘”按钮的选项(有关此问题的更多信息,请参阅此答案)。

为了更好地形象化这一点,这里有一张图片:在此处输入图片说明

我也写了一些代码,但这里的重点是我无法在正确的位置捕获事件,因此表单在返回后立即提交或当我阻止事件时,焦点在我点击后发生变化返回2次。

请参阅此处的示例:https : //codepen.io/ofhouse/pen/Rgwzxy(我也粘贴了下面的代码)

class TextInput extends React.Component {
  constructor(props) {
    super(props);
    this._onKeyPress = this._onKeyPress.bind(this);
  }

  componentDidMount() {
    if (this.props.focus) {
      this.textInput.focus();
    }
  }

  componentDidUpdate(nextProps) {
    if (nextProps.focus) {
      this.textInput.focus();
    }
  }

  _onKeyPress(e) {
    if (e.key === 'Enter') {
      this.props.onSubmit(e);
    }
  }

  render() {
    return (
      <div>
        <input
          type="text"
          onKeyPress={this._onKeyPress}
          ref={input => {
            this.textInput = input;
          }}
        />
      </div>
    );
  }
}

class Application extends React.Component {
  constructor(props) {
    super(props);

    this.state …
Run Code Online (Sandbox Code Playgroud)

javascript dom-events reactjs react-dom

3
推荐指数
1
解决办法
8942
查看次数