小编Kei*_*ong的帖子

我在构建webapp时遇到了这个问题,我在这个jsfiddle中复制了它.本质上,我想在this.setState({message: input_val})每次输入内容时调用一个输入,然后将其传递给父App类,然后将该消息重新呈现到Message类.然而,输出似乎总是落后于我实际输入的一步.jsfiddle演示应该是自我解释的.我想知道我是否做错了提示这一点.

HTML

<script src="http://facebook.github.io/react/js/jsfiddle-integration.js"></script>
<div id='app'></div>

JS

var App = React.createClass({
    getInitialState: function() {
        return {message: ''}
    },
    appHandleSubmit: function(state) {
        this.setState({message: state.message});
        console.log(this.state.message);
    },
    render: function() {
        return (
            <div className='myApp'>
            <MyForm onChange={this.appHandleSubmit}/>
            <Message message={this.state.message}/>
            </div>
        );
    }
});

var MyForm = React.createClass({
    handleSubmit: function() {
        this.props.onChange(this.state);
    },
    handleChange: function(e) {
        console.log(e.target.value);
        this.setState({message: e.target.value});
        this.handleSubmit();
    },
    render: function() {
        return (
            <form className="reactForm" onChange={this.handleChange}>
            <input type='text' />
            </form>
        );
    }
});

var Message = …

我有一个问题,Jinja2没有'fa fa-tachometer'正确地将字符串渲染到类名.

Jinja2呈现如下字符串:

<i class={{ icon }}></i>

成

<i class="fa" fa-tachometer></i>,

如下图所示.我已经完成了空间文字,但它并没有解决我的问题.

{% set navigation_bar = [
    ('/dashboard', 'dashboard', 'fa fa-tachometer', 'Dashboard')
] -%}
{% set active_page = active_page|default('dashboard') -%}

{# For each of the sidebar nav items, render an <li> #}
{% for href, id, icon, title in navigation_bar %}
    {{ icon }}
    <li {% if id == active_page %} class="active" {% endif %}>
        <a href="{{ href|e }}">
            <i class={{ icon }}></i>
            <span class="nav-label">{{ title|e }}</span> …