小编gam*_*mer的帖子

在状态变化时对变更类名做出反应

我有一个这样的州,我正在设置activeclass标记这样:

constructor(props) {
        super(props);
        this.state = {'active': false, 'class': 'album'};
    }

  handleClick(id) {
    if(this.state.active){
      this.setState({'active': false,'class': 'album'})
    }else{
      this.setState({'active': true,'class': 'active'})
    }
  }
Run Code Online (Sandbox Code Playgroud)

我有一个州名列表项目列表:

<div className={this.state.class} key={data.id} onClick={this.handleClick.bind(this.data.id}>
    <p>{data.name}</p>
</div>
Run Code Online (Sandbox Code Playgroud)

在这里如何更改特定div的类名?

javascript reactjs

35
推荐指数
1
解决办法
8万
查看次数

reactjs事件监听器beforeunload已添加但未删除

我有一个反应组件,如:

import React, { PropTypes, Component } from 'react'


class MyComponent extends Component {

    componentDidMount() {
       window.addEventListener("beforeunload", function (event) {
            console.log("hellooww")
            event.returnValue = "Hellooww"
        })
    }

    componentWillUnmount() {
        window.removeEventListener("beforeunload", function (event) {
            console.log("hellooww")
            event.returnValue = "Hellooww"
        })
    }

    render() {

        return (
            <div>
                Some content
            </div>
        )
    }

}

export default MyComponent
Run Code Online (Sandbox Code Playgroud)

此处将事件列表器添加到组件中.当我刷新页面时,它会弹出要求离开页面.

但当我转到另一个页面并刷新它再次显示相同的弹出窗口.

我正在eventListener从组件中删除componentWillUnmount.那为什么它没有被删除?

如何beforeunload在其他页面上删除该事件?

javascript event-listener addeventlistener reactjs

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

在Bootstrap中激活单击的选项卡

我正在使用Django和Django集成Bootstrap.这是导航栏的HTML代码:

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Project name</a>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li ><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Games <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">RacingDNA</a></li>
            <li><a href="#">Skater Game</a></li>

          </ul>
        </li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)

我也为活动导航栏编写了CSS.此处只有一个导航栏处于活动状态.我想让点击的导航栏处于活动状态,从而应用我的CSS.我的CSS非常适合主动导航栏,而且这种情况只适用于一个.

我用Google搜索并找到了添加此jQuery的解决方案:

$('.nav.navbar-nav > li').on('click', function (e) {
e.preventDefault();
$('.nav.navbar-nav > li').removeClass('active');
$(this).addClass('active'); …
Run Code Online (Sandbox Code Playgroud)

django twitter-bootstrap

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

在事件中反应本机播放声音

我有一个组件,如:

import React, { Component } from 'react'
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native'


class MovieList extends Component {


    handlePress() {
        // Play some sound here
    }

    render() {
        const { movie } = this.props
        return (
            <TouchableOpacity onPress={this.handlePress.bind(this)}>
                <View style={styles.movie}>
                    <Text style={styles.name}>{movie.name}</Text>
                    <View style={styles.start}>
                        <Text style={styles.text}>Start</Text>
                    </View>
                </View>
            </TouchableOpacity>
        )
    }
}
Run Code Online (Sandbox Code Playgroud)

在这里当我触摸时view我想播放一些声音.我搜索了它,但没有找到任何适当的答案

无论如何,当我按下某些东西时我能发出声音吗?我怎样才能做到这一点 ?

react-native

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

django创建多个类型用户的最佳方法

我想在django中创建多个用户.我想知道哪种方法最好..

class Teachers(models.Model):
    user = models.ForeignKey(User)
    is_teacher = models.BooleanField(default=True)
    .......
Run Code Online (Sandbox Code Playgroud)

或者我应该使用..

class Teacher(User):
    is_teacher = models.BooleanField(default=True)
    .......
Run Code Online (Sandbox Code Playgroud)

或者我必须制作自定义用户模型...这对于创建多个类型的用户来说会很好......

python django

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

Webpack nodejs fs.readFile不是一个函数

我有一个webpack配置,如:

var path = require('path')

module.exports = {
    entry: "./index.js",
    output: {
        path: path.join(__dirname, 'static'),
        filename:'bundle.js'
    },
    module: {
        loaders: [
            { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader"},
            { test: /\.json$/, loader: 'json-loader' },
        ]
    },
    node: {
      fs: "empty"
    }
};
Run Code Online (Sandbox Code Playgroud)

我想用文件阅读文件 fs

我做的事情如下:

var fs = require('fs')
console.log(fs)

fs.readFile('input.txt', function (err, buffer) {
        console.log("buffer")
        console.log(buffer)


    })
Run Code Online (Sandbox Code Playgroud)

我只是想在这里阅读一个文件,但是当我这样做时它给了我一个错误说:

fs.readFile 不是一个功能

我已经安装fs使用npm install --save fs

另外,当我打印fs它给我空对象.我上面做的console.log(fs)就是给我空物

这里有什么问题?

fs node.js webpack

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

javascript Promise.all仅返回最后一个承诺

我有一个脚本,如:

var a = [{'a': 1},{'b': 2}]
var allPromises = new Array(a.length)
for(var i in a) {
    allPromises[i] = Promise.resolve().then(response => {
      console.log(i)
      console.log(a[i])
      // Do somethig on every loop with key and value
      return i
    })
}

Promise.all(allPromises).then(response => console.log(response))
Run Code Online (Sandbox Code Playgroud)

这里在我的for loop它只给了我最后一个索引和最后一个索引的值,而我想要每个循环的值,并执行一些关键和值的动作..但我只得到最后一个键和值..

我试图获得价值Promise.all的回应,但没有奏效.

如何在allPromises响应中获取数组的索引?

我可以通过制作一个柜台来做到这一点.但是当我再次调用该函数时,计数器被重置,所以我不想使用计数器.

无论如何,我可以在每个循环上获得索引的索引吗?

javascript promise es6-promise

6
推荐指数
1
解决办法
1896
查看次数

django如何计算许多人的领域

我有问题的模型:

class Question(models.Model):
    user = models.ForeignKey(User)
    title = models.CharField(max_length=120)
    description = models.TextField()
    answers = models.ManyToManyField('Answer',related_name='answer_name', blank=True)
    post_date = models.DateTimeField(auto_now=True)

def __unicode__(self):
    return self.title
Run Code Online (Sandbox Code Playgroud)

我有回答的模型:

class Answer(models.Model):
    user = models.ForeignKey(User)
    question = models.ForeignKey(Question)
    ans_body = models.TextField()
    post_date = models.DateTimeField(auto_now=True)

def __unicode__(self):
    return self.ans_body
Run Code Online (Sandbox Code Playgroud)

问题创建和答案提交工作完美.我无法正确显示特定问题的答案.但是,当我试图得到特定问题的答案时,它没有显示出来.它显示0计数.

在我看来,我得到的答案列表:

context["question_list"] = Question.objects.all()
Run Code Online (Sandbox Code Playgroud)

在我的模板中

{% for question in question_list %}
   {{ question.title }}
    Ans:{{question.answers.count}}
{% endfor %}
Run Code Online (Sandbox Code Playgroud)

当我这样做时,如果有答案我得到计数​​0.如何获得特定问题的答案计数.

python django django-queryset

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

django tinymce 不显示富文本区域

我的设置:

MEDIA_ROOT = os.path.join(BASE_DIR, 'static')
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
)
TINYMCE_JS_URL = os.path.join(MEDIA_ROOT, "js/tiny_mce/tiny_mce.js")
TINYMCE_JS_ROOT = os.path.join(MEDIA_ROOT, "js/tiny_mce")
TINYMCE_DEFAULT_CONFIG = {
    'plugins': "table,spellchecker,paste,searchreplace",
    'theme': "advanced",
    'cleanup_on_startup': True,
    'custom_undo_redo_levels': 10,
}
TINYMCE_SPELLCHECKER = True
TINYMCE_COMPRESSOR = True
Run Code Online (Sandbox Code Playgroud)

和我的表格:

class AnswerCreationForm(forms.ModelForm):

ans_body = forms.CharField(widget=TinyMCE(attrs={'cols': 80, 'rows': 30}))
class Meta:
    model = Answer 
    fields = ('ans_body',)
Run Code Online (Sandbox Code Playgroud)

在我看来,我已经这样做了:

<head>
    {{answer_form.media}}
</head>
<form action="{% url "answer-submit" question.id %}" method="get">{% csrf_token %}
{{answer_form.as_p}}
<input type="submit" value="Answer">
</form>
Run Code Online (Sandbox Code Playgroud)

但它不显示富文本只是显示普通的文本编辑器。

我什至尝试过:

<head>
<script type="text/javascript" src="/static/js/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript"> …
Run Code Online (Sandbox Code Playgroud)

python forms django tinymce

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

反应本机android滚动视图不工作

我有一个反应本机组件,例如:

import React, { Component } from 'react';
import { StyleSheet, Text, View, ScrollView } from 'react-native';

import Level from './Level';

class LevelList extends Component {
    render() {

        return (
            <ScrollView style={styles.scrollView} >
                <View style={styles.levelList}>
                    <Level />
                    <Level />
                    <Level />
                    <Level />
                    <Level />
                    <Level />
                </View>
            </ScrollView>
        )
    }
}

var styles = StyleSheet.create({
    scrollView: {
    backgroundColor: '#fff',
    flex: 1,
    },
    levelList: {
        marginTop: 50,
        flexDirection:'column',
        alignItems: 'center',
    },

})

export default LevelList;
Run Code Online (Sandbox Code Playgroud)

<Level>只是一个保存文本的组件。

<LevelList>我的容器中有这样的: …

react-native react-native-scrollview

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