Javascript 在'上使用过滤器；这'；在Reactjs中

这是我的家长班

class ComponentStart extends Component {
    constructor()
    {   
        super();
        this.count = 0;
        this.state = {}; 
        this.repeats = []; 
    }   

    delete_this(index)
    {   
        console.log("I am deleting");
        console.log(index);
        this.repeats = this.repeats.filter( (item) => item != index );
        this.setState({ repeats: this.repeats }); 
    }  
    componentWillMount()
    {   
        for (let i = 0; i < this.props.number; i++)
        {   
            this.repeats.push(<StartMultiple key={this.count} id={this.count} delete_this={this.delete_this.bind(this)}/>);             
            this.count++;
        }       
        this.setState({ repeats: this.repeats});
    }

    componentHasMounted()
    {
    }

    render()
    {
        return(
            <div>
                {this.state.repeats}

                <button onClick={this.add_repeat.bind(this, event)}>clickable</button>
            </div>
        );
    } 

class ComponentStart扩展组件{
构造函数（）
{   
超级（）；
此值为0.count；
this.state={}；
this.repeats=[]；
}   
删除此（索引）
{   
console.log（“我正在删除”）；
控制台日志（索引）；
this.repeats=this.repeats.filter（（项）=>item！=index）；
this.setState（{repeats:this.repeats}）；
}  
组件willmount（）
{   
for（设i=0；i

这是儿童班：

export default class StartMultiple extends Component {
    constructor()
    {   
        super();
        this.options = [ 1, 2, 3, 4, 5]; 
        this.temp_option = []; 
        this.delete_me = this.delete_me.bind(this);
        this.buttons = [<button key="0" onClick={this.delete_me}/>,<button key="1" onClick={this.delete_me}/>];
        this.state = { buttons: this.buttons };
    }   

    ComponentDidMount()
    {   
        $.ajax({
            url: "src/php/search.php?type=search",
            dataType: "json",
            success: (data) =>
            {   
                console.log(data);
            }   
        }); 
    }   

    delete_this(value)
    {
        console.log(value);
        this.props.delete_this(value);
        return;
    }

    render()
    {
        console.log(this.props);
        return(
            <div>
                <input id={"input" + this.props.id} type="text"/>
                <select>
                    {this.options.map(this.toOptions)}
                </select>
                <div>
                    I am some text
                </div>
                <div>
                    <button onClick={this.hide_info.bind(this)}>hide previous</button>
                    <button onClick={this.delete_this.bind(this, this)} ref={ (input) => { this.button = input; } } value={"hi"}>delete</button>
                </div>

                {this.buttons}
            </div>
        );
    }
}

导出默认类StartMultiple扩展组件{
构造函数（）
{   
超级（）；
this.options=[1,2,3,4,5]；
this.temp_选项=[]；
this.delete_me=this.delete_me.bind（this）；
this.buttons=[，]；
this.state={buttons:this.buttons}；
}   
ComponentDidMount（）
{   
$.ajax({
url：“src/php/search.php？type=search”，
数据类型：“json”，
成功：（数据）=>
{   
控制台日志（数据）；
}   
}); 
}   
删除此（值）
{
console.log（值）；
this.props.delete_此（值）；
返回；
}
render（）
{
console.log（this.props）；
返回(
{this.options.map（this.toOptions）}
我是一些文本
隐藏以前的
{this.button=input；}}value={“hi”}>delete
{this.buttons}
);
}
}

因此，当我单击StartMultiple

{this.button=input；}}}value={“hi”}>delete

中的按钮时，它将触发父级的

delete\u this

函数（它会这样做）

---

所以基本上，除了过滤部分，一切都像我预期的那样正常工作。我不确定它为什么不过滤，即使它正确地传递了您正在比较创建的React元素的组件：

this.repeats.push(<StartMultiple ... delete_this={this.delete_this.bind(this)}/>);             

---

这不是您所期望的，但是不要通过React实例检查来查找数组中的元素。从仅包含数据的数组中删除项，例如比较数组中的ID或索引。
您正在比较创建的元素：

this.repeats.push(<StartMultiple ... delete_this={this.delete_this.bind(this)}/>);             

这不是您所期望的，但是不要通过React实例检查来查找数组中的元素。从仅包含数据的数组中删除项，例如比较数组中的ID或索引。
此代码通常存在许多问题。此代码通常存在许多问题。但我正在将值从子函数传递回父函数？那么，它不会传递StartMultiple值吗？我对react不太熟悉，所以我只是使用普通javascript中的逻辑，在这里我将（例如）一个按钮的“this”传递给一个函数，然后通过过滤器将其删除：\a new
this
不是在for循环中创建的。我运行一个
console.log（index instanceof Start）console.log（index instanceof StartMultiple），则它是false这是真的，这意味着它的功能正如我预期的那样…哦，我的错误，对不起！我误读了第一个
bind（）
，但我正在将值从子函数传递回父函数？那么，它不会传递StartMultiple值吗？我对react不太熟悉，所以我只是使用普通javascript中的逻辑，在这里我将（例如）一个按钮的“this”传递给一个函数，然后通过过滤器将其删除：\a new
this
不是在for循环中创建的。我运行一个
console.log（index instanceof Start）console.log（index instanceof StartMultiple），则它是false这是真的，这意味着它的功能正如我预期的那样…哦，我的错误，对不起！我误读了第一个
bind（）