Question

来自Vue.js（双向数据流）我有一个问题是关于单向数据流的反应 - 我有一个父有一个处理器为它的子onClick：

<div className="recipe-container">
                <button onClick={this.toggleRecipeList.bind(this)}>Show Recipes</button>
                <RecipeList showRecipe={this.showRecipe} list={this.state.recipes} />
            </div>

所以，我传递showRecipe处理程序，它只有一个参数（只是将它记录到控制台）。

我的RecipeList看起来像这样（无状态功能）：

return (<ul className='recipe-list-bottom'>
        {
            props.list.map((rec, key) => {
                return <li onClick={props.showRecipe(rec)} key={key}>{rec.title}</li>
            })
        }

    </ul>)

我尝试启动showRecipe(rec)以将当前rec对象作为参数。虽然我记得我想要的东西，但处理程序是从button开始的，RecipeList是onClick={props.showRecipe.bind(null,rec)}的兄弟。

我设法通过将li添加到showRecipe(rec)元素来实现它，但我觉得这样做非常脏。

我错过了什么吗？我认为showRecipe(rec)足以得到我想要的东西。为什么this被button设置为{{1}}时被解雇？

Answer 1

我认为您的第二个代码段有一个经典错误：

return (<ul className='recipe-list-bottom'>
        {
            props.list.map((rec, key) => {
                return <li onClick={props.showRecipe(rec)/*here*/} key={key}>{rec.title}</li>
            })
        }

    </ul>)

您正在将showRecipe的调用结果分配给onClick参数，而不是函数本身。 bind解决方案有效，但如果您想在不使用bind的情况下传递参数rec，则需要打包调用：

return (<ul className='recipe-list-bottom'>
        {
            props.list.map((rec, key) => {
                return <li onClick={()=>props.showRecipe(rec)} key={key}>{rec.title}</li>
            })
        }

    </ul>)

Answer 2

你可以使用es2015 stage-0语法来编写它：

class Blah extends Component {
  onClick = (recipe) => e => this.props.showRecipe(recipe);

  render() { 
    return (
      <ul className='recipe-list-bottom'>
        {
            props.list.map((rec, key) => {
                return <li onClick={onClick(rec)} key={key}>{rec.title}</li>
            })
        }

      </ul>
    )
  }
}

Reactjs - 需要绑定两次onClick处理程序吗？

2 个答案: