web-dev-qa-db-ja.com

JSXプロップは.bind（）を使用しないでください

この方法でバインディングを持っているときにこのエラーを修正する方法：以前はコンストラクターでバインディングを解決しましたが、これは少し複雑です：

    {this.onClick.bind(this, 'someString')}>
and
     <form onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}>
reactjsreact-jsxjsxfunction-binding
15
monkeyjs

オプション1：

使用する arrow functions（with 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>
         )
       }
     }
30
anoop

クラスコンストラクターでバインディングを使用することをお勧めします。これにより、インラインの繰り返し（および混乱）が回避され、「バインド」が1回だけ実行されます（コンポーネントの開始時）。

ユースケースでよりクリーンな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>
        );
    }
}
5
Kaloyan Kosev

前述のすべての回答で欲望の結果を達成できたとしても、以下のスニペットは言及する価値があると思います。

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>
   );
  }
}
0
Louis Phang