javascript 使用Event.target.id作为沿组件链向上发送数据的方法

jm81lzqq 于 2023-01-04 发布在 Java

关注(0)|答案(1)|浏览(101)

我有一个项目列表，我想将一些数据从一个子组件带到“事实源”中，在本例中选择了哪些项目，但是我能想到的指定选择了哪些列表项目的唯一方法是使用event.target.id属性。我在其中一个子组件中指定了该属性。请参见下文

constructor(props){ 
        super(props)
        this.state = {
            showDialog : false,
            preparedSpells: [],
        }
}

    onPrep(e){
        let prepedSpells = this.state.preparedSpells
        let targetSpell = Number(e.target.id)

        if (prepedSpells.includes(targetSpell)){
            let index = prepedSpells.indexOf(targetSpell)
            prepedSpells.splice(index,1)
        } else {
            prepedSpells.push(targetSpell)
        }

        this.setState({
            prepedSpells : prepedSpells
            })

    render(){
       
         return(
            <SpellList spells = {this.spells} onSpellClick = {this.onSpellClick} onClick = {this.onPrep}></SpellList>
         );

我需要数据处于这个级别，但是我觉得应该有一种方法来设置其中一个列表项组件的状态，然后遍历所有组件以找到选中的组件。
我知道数据只会在react中向下流动，但我错过了什么吗？或者我应该把这种错误的感觉憋在心里

JavaScript

来源：https://stackoverflow.com/questions/74985146/using-event-target-id-as-a-way-of-sending-data-up-the-component-chain

1条答案

按热度按时间

rwqw0loc1#

在我看来你已经很接近正确了。
让我告诉你我会改变什么：您可以只传递id，而不是将整个事件传递给“onPrep”。

onPrep(targetSpell){
    let prepedSpells = this.state.preparedSpells

    if (prepedSpells.includes(targetSpell)){
        let index = prepedSpells.indexOf(targetSpell)
        prepedSpells.splice(index,1)
    } else {
        prepedSpells.push(targetSpell)
    }

    this.setState({
        prepedSpells : prepedSpells
    })

实际上我没有SpellList组件的代码，但您应该有类似以下的代码：

return (
  <div>
    {this.props.spells.map((spell) => {
      return <button onClick={() => {this.props.onClick(spell.id)}}>{spell.name}</button>;
    })}
  </div>
);

这样，您就可以将任何您想要传递给click事件处理程序的内容传递给它，而且它会使事情看起来更简洁。

赞(0）回复(0）举报 2023-01-04

我来回答

javascript 使用Event.target.id作为沿组件链向上发送数据的方法

1条答案

相关问题

热门标签

最新问答