javascript - 【React 小案例】的简单问题,请前辈您指点一下,谢谢^_^。
伊谢尔伦
伊谢尔伦 2017-04-11 11:42:23
0
1
139

通过这个网址可以访问在线编辑器:http://runjs.cn/code/vgipwvdu 链接内容如下图
问题在图中用红字标注▼

【以下代码】和【图中的】和【在线编辑器的】都是一样的代码。

<p id="app">注入失败</p>
<script type="text/babel">
    var Boxes=React.createClass({
        //▼定义一个组件,
        render:function(){
            return (
                <p>
                    {
                        this.state.text.map(this.render_one_box)
                    }
                </p>
            )
        },
        //▼初始化state, ▲定义一个组件
        getInitialState:function(){
            return {
                text:["零","一","二","三","四","五"]
            }
        },
        //▼.map调用的函数,▲初始化state
        render_one_box:function(value,i){
            return (
                <p className="one-box" index={i}  key={i} >
                    <p>{value} {i}</p>
                    <button onClick={this.fn_del.bind(this, this.props.index)}>删除</button>
                </p>
            )
        },
        //▼删除调用的函数, ▲.map调用的函数
        //▼问题可能主要出在这里,删除了一个state,但删除哪一个state都是第一个state被删除掉请看一下
        fn_del:function(index){
            var newText= this.state.text;
            newText.splice(index, 1);
            this.setState({
                text:newText,
            });
        },
    });
//--------------------------------------------------------------------
 ReactDOM.render(
    <Boxes></Boxes>,
    document.getElementById('app'),
 );
</script>
伊谢尔伦
伊谢尔伦

小伙看你根骨奇佳,潜力无限,来学PHP伐。

人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!