JSX 道具不应使用 .bind()答案

【问题标题】：JSX props should not use .bind()JSX 道具不应使用 .bind()
【发布时间】：2017-04-07 23:30:30
【问题描述】：

当我以这种方式绑定时如何解决此错误：之前在构造函数中的绑定已解决，但这对我来说有点复杂：

{this.onClick.bind(this, 'someString')}>

和

<form onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}>

【问题讨论】：

标签： reactjs jsx function-binding

【解决方案1】：

选项 1：

使用arrow functions（使用 babel-plugins） PS：- 实验功能

class MyComponent extends Component {
   handleClick = (args) => () => {
      // access args here;
      // handle the click event
   }

   render() {
     return (
       <div onClick={this.handleClick(args)}>
         .....
       </div>
     )
   }
 }

选项 2：不推荐

在渲染中定义箭头函数

   class MyComponent extends Component {
       render() {
         const handleClick = () => {
          // handle the click event
         }
         return (
           <div onClick={handleClick}>
             .....
           </div>
         )
       }
     }

选项 3：

在构造函数中使用绑定

   class MyComponent extends Component {
       constructor() {
         super();
         this.handleClick = this.handleClick.bind(this);
       }

       handleClick() {
          // handle click
       }

       render() {

         return (
           <div onClick={this.handleClick}>
             .....
           </div>
         )
       }
     }

【讨论】：

第一个选项叫做"class property"，它是一个实验性的babel插件
@PaoloMoretti 是的，没错。我更新了答案。谢谢指点
第一个选项如何传递参数？
是的，我遇到的主要问题是如何传递参数？我已经在我的代码中为其他更简单的功能做 Option3...
@shota 已更新，使用闭包解决问题

【解决方案2】：

我建议您在类构造函数中使用绑定。这将避免内联重复（和混淆），并且只会执行一次“绑定”（在启动组件时）。

这是一个如何在您的用例中实现更简洁的 JSX 的示例：

class YourComponent extends React.Component {
    constructor(props) {
        super(props);

        // Bind functions
        this.handleClick = this.handleClick.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleClick() {
        this.onClick('someString');
    }
    onClick(param) {
        // That's your 'onClick' function
        // param = 'someString'
    }

    handleSubmit() {
        // Same here.
        this.handleFormSubmit();
    }
    handleFormSubmit() {
        // That's your 'handleFormSubmit' function
    }

    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                <p>...</p>
                <button onClick={this.handleClick} type="button">Cancel</button>
                <button type="submit">Go!</button>
            </form>
        );
    }
}

【讨论】：

这不起作用 - 无限循环 - bundle.js:10623 警告：setState(...)：在现有状态转换期间无法更新（例如在 render 内）。渲染方法应该是 props 和 state 的纯函数。
嘿@monkeyjs ，我刚刚用您的用例的代码示例更新了我的答案。请尝试这种方式。如果您再次收到相同的错误，则问题出在其他地方。那么请分享更完整的代码示例，我会尽力帮助你。

【解决方案3】：

虽然前面所有的答案都能达到想要的结果，但我觉得下面的sn-p值得一提。

class myComponent extends PureComponent {

  handleOnclickWithArgs = arg => {...};

  handleOnclickWithoutArgs = () => {...};

  render() {
    const submitArg = () => this.handleOnclickWithArgs(arg);
    const btnProps = { onClick: submitArg }; // or onClick={submitArg} will do

    return (
      <Fragment>
        <button {...btnProps}>button with argument</button>
        <button onClick={this.handleOnclickWithoutArgs}>
          button without argument
        </button>
     </Fragment>
   );
  }
}

【讨论】：