javascript - 列出每个元素的修改按钮

Question

我有一个 React Redux 应用程序，它显示了停在选定 parking 场的汽车列表，但不是所有汽车，只有那些具有名为 parked=true 的属性的汽车。

我正在使用 API 修改数据库中的元素并从中获取元素，现在我需要一个 PUT 请求来将每辆汽车的状态修改为 parked=false，然后将其从列表中删除。我已经有了 PUT 函数(我在下面链接了它)。

我的问题是函数需要元素的 ID，但我不知道如何将它传递给函数。

这是我的代码(voiture 表示汽车):

这是我在 actions.js 中的函数

export const ParkedModifié =(voiture) => ({
    type: VOITURE_MODIFIED,
    voiture
});
//PUT request
export const notParked = (id)=>{
    return(dispatch)=>{
        return requests.put(
            `/voitures/${id}`,
            {
                parked: false
            }
        ).then(response => dispatch(ParkedModifié(response)))
    }
}

这是我的 carList.js

        return (

            <div className="card mb-3 mt-3 shadow-sm">
                { voitureList.map(voiture => {
                    return (

                      <div className="card-body border-bottom" key={voiture.id}>
                         <p className="card-text mb-0">
                             {voiture.matricule}
                         </p>
                         <p className="card-text">
                         <small className="text-muted">{timeago().format(voiture.gareele)}</small>
                         </p>

                         <Button color="danger" onClick={this.onSubmit}>Change</Button>
                         </div>         
                    );
                })}
            </div>
        )
    }

Answer 1

以下模式是我一直使用的模式。这样，您就不会每次都传递具有不同引用的函数。在这种情况下，这将导致您的 Button 组件在该父组件呈现时无意义地重新呈现。

所以我们这里做的是传递onSubmit，然后从里面的'data-'属性中读取。

        onSubmit = event => {
           const id = event.currentTarget.getAttribute('data-id')
           // use id however you want
        }


        return (

        <div className="card mb-3 mt-3 shadow-sm">
            { voitureList.map(voiture => {
                return (

                  <div className="card-body border-bottom" key={voiture.id}>
                     <p className="card-text mb-0">
                         {voiture.matricule}
                     </p>
                     <p className="card-text">
                     <small className="text-muted">{timeago().format(voiture.gareele)}</small>
                     </p>

                     <Button 
                        color="danger" 
                        data-id={voiture.id}
                        onClick={this.onSubmit}
                     >
                       Change
                     </Button>
                     </div>         
                );
            })}
        </div>
    )
}