javascript - 【React 小案例】的简单问题，请前辈您指点一下，谢谢^_^。

问题描述

问 题

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

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

<div id="app">注入失败</div>
<script type="text/babel">
    var Boxes=React.createClass({
        //▼定义一个组件，
        render:function(){
            return (
                <div>
                    {
                        this.state.text.map(this.render_one_box)
                    }
                </div>
            )
        },
        //▼初始化state， ▲定义一个组件
        getInitialState:function(){
            return {
                text:["零","一","二","三","四","五"]
            }
        },
        //▼.map调用的函数，▲初始化state
        render_one_box:function(value,i){
            return (
                <div className="one-box" index={i}  key={i} >
                    <p>{value}　{i}</p>
                    <button onClick={this.fn_del.bind(this, this.props.index)}>删除</button>
                </div>
            )
        },
        //▼删除调用的函数， ▲.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>

解决方案

    render_one_box:function(value,i){
                return (
                    <div className="one-box" index={i}  key={i} >
                        <p>{value}　{i}</p>
                        <button onClick={this.fn_del.bind(this, i)}>删除</button>
                    </div>
                )

没有props传进来，fn_del的参数是undefined啊

这篇关于javascript - 【React 小案例】的简单问题，请前辈您指点一下，谢谢^_^。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！