【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>
阅读 2.1k
1 个回答
    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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题