javascript - 在 Reactjs 中使用 'this' 过滤器

Question

这个问题已经有答案了:

How to filter through array of components/elements in reactjs (2 个回答)

已关闭 6 年前。

这是我的父类

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>
        );
    } 

这是子类:

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 <button onClick={this.delete_this.bind(this, this)} ref={ (input) => { this.button = input; } } value={"hi"}>delete</button> 中的按钮时会发生什么它将触发父级的 delete_this函数(确实如此)。

所以基本上一切都按照我的预期工作正常，除了过滤部分。我不确定为什么它没有过滤，即使它正确地传递了组件

Answer 1

您正在比较您创建的 React 元素:

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

到index，这将是this，它是ComponentStart的实例

this.repeats = this.repeats.filter( (item) => item != index );

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