Question

我被告知这是一个非常糟糕的做法，但我很想知道是否可以在React中使用动态处理程序。请考虑以下代码。我想基于props值触发适当的处理程序。也就是说，当点击编辑按钮时，会调用编辑处理程序等。现在这样做无法正常抱怨...expected function but string provided...

import React from 'react';
import ReactDOM from 'react-dom';

export default class HelloWorld extends React.Component{
    render() {
        return(
        <div>
            <h4>Hello World</h4>
            <MyButton txt="edit" />
            <MyButton txt="insert" />
        </div>
        );
    }
};

export default class MyButton extends React.Component{
    edit() {
        console.log('edit button clicked');
    }
    insert() {
        console.log('insert button clicked');
    }
    render(){
        return (
            //Trigger handler based on this.props.txt
            <button onClick={this.props.txt}>{this.props.txt}</button>
        )
    }
}
ReactDOM.render(<HelloWorld/>, document.getElementById('hello'));

Answer 1

您收到错误，因为onClick您应该将引用传递给function而不是String。在这种情况下，您可以使用括号表示法（this[this.props.txt]）从对象（MyButton）获取属性

class MyButton extends React.Component{
  edit(e) {
    console.log('edit button clicked', e);
  }

  insert(e) {
    console.log('insert button clicked', e);
  }

  render() {
    return <button 
      onClick={ this[this.props.txt] }
    >
      { this.props.txt }
    </button>
  }
}

Example

Answer 2

你在代码中尝试做的事情并不是一种坏习惯，事实上它被称为＆＃34; Controller View＆＃34;。

Flux应用程序有三个主要部分：调度程序，存储和视图（React组件）。这些不应与模型 - 视图 - 控制器混淆。控制器确实存在于Flux应用程序中，但它们是控制器视图 - 通常位于层次结构顶部的视图，用于从存储中检索数据并将此数据传递给其子级。此外，动作创建者 - 调度程序帮助程序方法 - 用于支持描述应用程序中可能的所有更改的语义API。将它们视为Flux更新周期的第四部分可能很有用。 https://facebook.github.io/flux/docs/overview.html

这使您可以创建真正可重用的组件。

你得到的错误是因为你说＆＃34;点击，做＆＃34;编辑＆＃34;＆＃34;，但你真的想说＆＃34;点击，做编辑（）＆＃34;，edit函数是类的成员（因此this对象）。我没有一个项目知道测试它，但替换

<button onClick={this.props.txt}>{this.props.txt}</button>

通过

<button onClick={this[this.props.txt}]>{this.props.txt}</button>

应该做的伎俩。

是否可以在React中使用动态事件处理程序？

2 个答案: