如何使用 React 通过函数中的 props 向上传递参数?

Question

在一个类中，我会写：this.prop.bind(this，arg(

喜欢这个：

<button onClick={this.props.delete.bind(this, id)} id='deletebtn'>
X
</button>

但是我将如何在函数中做同样的事情呢？ 我需要使用一个类，或者有办法在没有它的情况下做到这一点？

PS：钩子杀死了班级吗？ 如果不是，什么时候真的需要上课？

Answer 1

好的，我找到了一种方法， 就像@JulienD说的那样，我只需要它来创建返回函数的函数 我就是这样做的。

子项将参数发送给父项

<button onClick={() => {props.delPost(id)}}>delete</button>

父级将参数再上一级

<Post delPost={(id)=>{props.delPost(id)}} key={post.id} postItem={post} />)

最后，根父级使用参数

const deletePost = (id) => {
console.log(id);
}
<Feed delPost={deletePost} posts={posts} />

Answer 2

你想要创建一个返回函数的函数，如下所示：

function deleteItem(id) {
return function() {
... <using `id`>
}
}

或带有箭头功能：

const deleteItem = (id) => {
return () => {
... <using `id`>
}
}

甚至更短：

const deleteItem = (id) => () => {
... <using `id`>
}

然后你做

<button onClick={deleteItem(id)} id='deletebtn'>

deleteItem(id)现在是一个函数。

为了回答你关于钩子的问题，它们并没有"杀死类"，而是只为 React 组件提供了一个可以说更好的替代方案。仍支持类组件。但是，很难想象带有钩子的新功能组件无法处理的情况。

Answer 3

您可以将removeItem处理程序向下传递给子组件 -

const { useState } = React
const initialItems =
[ "muffins", "cake", "pies" ]
const MyApp = ({ init = initialItems }) => {
const [items, setItems] = useState(init)

const removeItem = (pos = 0) => event =>
setItems([...items.slice(0, pos), ...items.slice(pos + 1)])

const addItem = event =>
event.key === "Enter"
? setItems([...items, event.target.value ])
: null

return <div>
{items.map((name, i) =>
<Item name={name} onDelete={removeItem(i)} />
)}
<div className="item">
<input onKeyDown={addItem} placeholder="Type here and press [ENTER]..." />
</div>
</div>
}
const Item = ({ name = "", onDelete }) =>
<div className="item">
{name} &nbsp;
<button onClick={onDelete}>🗑️</button>
</div>

ReactDOM.render(<MyApp />, document.body)

body {
font-family: monospace;
}
.item {
background-color: ghostwhite;
padding: 0.5rem;
}
input {
display: block;
box-sizing: border-box;
width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>