这是我的父类
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
函数(确实如此)。
所以基本上一切都按照我的预期工作正常,除了过滤部分。我不确定为什么它没有过滤,即使它正确地传递了组件
最佳答案
您正在比较您创建的 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 或索引。
关于javascript - 在 Reactjs 中使用 'this' 过滤器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41435474/