Reactステートレスコンポーネントのイベントハンドラー

Question 1

Reactステートレスコンポーネントでイベントハンドラーを作成するための最適な方法を見つけようとしています。私はこのようなことをすることができます：

const myComponent = (props) => {
    const myHandler = (e) => props.dispatch(something());
    return (
        <button onClick={myHandler}>Click Me</button>
    );
}

ここでの欠点は、このコンポーネントがレンダリングされるたびに、新しい「myHandler」関数が作成されることです。コンポーネントのプロパティにアクセスできるステートレスコンポーネントでイベントハンドラーを作成するためのより良い方法はありますか？

Question 2

関数コンポーネントの要素にハンドラーを適用すると、通常は次のようになります。

const f = props => <button onClick={props.onClick}></button>

もっと複雑なことをする必要がある場合は、a）コンポーネントをステートレスにしない（クラスまたはフックを使用する）か、b）外部のステートフルコンテナコンポーネントにハンドラーを作成する必要があることを示しています。

余談ですが、コンポーネントがアプリの特に集中的に再レンダリングされた部分にない限り、私の最初のポイントをわずかに損なうことはありませんrender()。で矢印関数を作成することを心配する必要はありません。

Question 3

新しいReactフック機能を使用すると、次のようになります。

const HelloWorld = ({ dispatch }) => {
  const handleClick = useCallback(() => {
    dispatch(something())
  })
  return <button onClick={handleClick} />
}

useCallback メモ化された関数を作成します。つまり、レンダリングサイクルごとに新しい関数が再生成されることはありません。

https://reactjs.org/docs/hooks-reference.html#usecallback

ただし、これはまだ提案段階です。

Question 4

この方法はどうですか：

const myHandler = (e,props) => props.dispatch(something());

const myComponent = (props) => {
 return (
    <button onClick={(e) => myHandler(e,props)}>Click Me</button>
  );
}

Question 5

ハンドラーが変更されるプロパティに依存している場合、ハンドラーをキャッシュするステートフルインスタンスがないため、ハンドラーを毎回作成する必要があります。動作する可能性のある別の代替方法は、入力小道具に基づいてハンドラーをメモ化することです。

カップルの実装オプションは lodash._memoize R.memoize 高速memoizeを

Question 6

ソリューション1のmapPropsToHandlerとevent.target。

関数はjsのオブジェクトであるため、プロパティをアタッチすることができます。

function onChange() { console.log(onChange.list) }

function Input(props) {
    onChange.list = props.list;
    return <input onChange={onChange}/>
}

この関数は、プロパティを関数に1回だけバインドします。

export function mapPropsToHandler(handler, props) {
    for (let property in props) {
        if (props.hasOwnProperty(property)) {
            if(!handler.hasOwnProperty(property)) {
                 handler[property] = props[property];
            }
        }
    }
}

私は私の小道具をこのように手に入れます。

export function InputCell({query_name, search, loader}) {
    mapPropsToHandler(onChange, {list, query_name, search, loader});
    return (
       <input onChange={onChange}/> 
    );
}

function onChange() {
    let {query_name, search, loader} = onChange;
    
    console.log(search)
}

この例では、event.targetとmapPropsToHandlerの両方を組み合わせています。数値や文字列だけでなく、ハンドラーに関数をアタッチすることをお勧めします。数値と文字列は、次のようなDOM属性を使用して渡すことができます。

<select data-id={id}/>

mapPropsToHandlerではなく

import React, {PropTypes} from "react";
import swagger from "../../../swagger/index";
import {sync} from "../../../functions/sync";
import {getToken} from "../../../redux/helpers";
import {mapPropsToHandler} from "../../../functions/mapPropsToHandler";

function edit(event) {
    let {translator} = edit;
    const id = event.target.attributes.getNamedItem('data-id').value;
    sync(function*() {
        yield (new swagger.BillingApi())
            .billingListStatusIdPut(id, getToken(), {
                payloadData: {"admin_status": translator(event.target.value)}
            });
    });
}

export default function ChangeBillingStatus({translator, status, id}) {
    mapPropsToHandler(edit, {translator});

    return (
        <select key={Math.random()} className="form-control input-sm" name="status" defaultValue={status}
                onChange={edit} data-id={id}>
            <option data-tokens="accepted" value="accepted">{translator('accepted')}</option>
            <option data-tokens="pending" value="pending">{translator('pending')}</option>
            <option data-tokens="rejected" value="rejected">{translator('rejected')}</option>
        </select>
    )
}

解決策2。イベントの委任

解決策1を参照してください。入力からイベントハンドラーを削除して、他の入力も保持する親に配置できます。ヘルプ委任手法により、event.traget関数とmapPropsToHandler関数を再度使用できます。

Question 7

これは、typescriptでreactとreduxを記述して実装された私の簡単なお気に入りの製品リストです。カスタムハンドラーで必要なすべての引数を渡し、EventHandlerオリジンイベント引数を受け入れる新しい引数を返すことができます。それはだMouseEvent、この例では。

分離された関数はjsxをよりクリーンに保ち、いくつかのリンティングルールに違反するのを防ぎます。以下のようなjsx-no-bind、jsx-no-lambda。

import * as React from 'react';
import { DispatchProp, Dispatch, connect } from 'react-redux';
import { removeFavorite } from './../../actions/favorite';

interface ListItemProps {
  prod: Product;
  handleRemoveFavoriteClick: React.EventHandler<React.MouseEvent<HTMLButtonElement>>;
}

const ListItem: React.StatelessComponent<ListItemProps> = (props) => {
  const {
    prod,
    handleRemoveFavoriteClick
  } = props;  

  return (
    <li>
      <a href={prod.url} target="_blank">
        {prod.title}
      </a>
      <button type="button" onClick={handleRemoveFavoriteClick}>&times;</button>
    </li>
  );
};

const handleRemoveFavoriteClick = (prod: Product, dispatch: Dispatch<any>) =>
  (e: React.MouseEvent<HTMLButtonElement>) => {
    e.preventDefault();

    dispatch(removeFavorite(prod));
  };

interface FavoriteListProps {
  prods: Product[];
}

const FavoriteList: React.StatelessComponent<FavoriteListProps & DispatchProp<any>> = (props) => {
  const {
    prods,
    dispatch
  } = props;

  return (
    <ul>
      {prods.map((prod, index) => <ListItem prod={prod} key={index} handleRemoveFavoriteClick={handleRemoveFavoriteClick(prod, dispatch)} />)}
    </ul>    
  );
};

export default connect()(FavoriteList);

typescriptに慣れていない場合は、javascriptスニペットを次に示します。

import * as React from 'react';
import { DispatchProp, Dispatch, connect } from 'react-redux';
import { removeFavorite } from './../../actions/favorite';

const ListItem = (props) => {
  const {
    prod,
    handleRemoveFavoriteClick
  } = props;  

  return (
    <li>
      <a href={prod.url} target="_blank">
        {prod.title}
      </a>
      <button type="button" onClick={handleRemoveFavoriteClick}>&times;</button>
    </li>
  );
};

const handleRemoveFavoriteClick = (prod, dispatch) =>
  (e) => {
    e.preventDefault();

    dispatch(removeFavorite(prod));
  };

const FavoriteList = (props) => {
  const {
    prods,
    dispatch
  } = props;

  return (
    <ul>
      {prods.map((prod, index) => <ListItem prod={prod} key={index} handleRemoveFavoriteClick={handleRemoveFavoriteClick(prod, dispatch)} />)}
    </ul>    
  );
};

export default connect()(FavoriteList);

Question 8

ステートレスコンポーネントの場合と同様に、関数を追加するだけです-

function addName(){
   console.log("name is added")
}

そしてそれはリターンで呼び出されます onChange={addName}

Question 9

あなたが心配している小道具にいくつかの機能しかない場合は、これを行うことができます：

let _dispatch = () => {};

const myHandler = (e) => _dispatch(something());

const myComponent = (props) => {
    if (!_dispatch)
        _dispatch = props.dispatch;

    return (
        <button onClick={myHandler}>Click Me</button>
    );
}

それがはるかに複雑になった場合、私は通常、クラスコンポーネントを持つことに戻ります。

Question 10

継続的な努力の後、ようやく私のために働きました。

//..src/components/atoms/TestForm/index.tsx

import * as React from 'react';

export interface TestProps {
    name?: string;
}

export interface TestFormProps {
    model: TestProps;
    inputTextType?:string;
    errorCommon?: string;
    onInputTextChange: React.ChangeEventHandler<HTMLInputElement>;
    onInputButtonClick: React.MouseEventHandler<HTMLInputElement>;
    onButtonClick: React.MouseEventHandler<HTMLButtonElement>;
}

export const TestForm: React.SFC<TestFormProps> = (props) => {    
    const {model, inputTextType, onInputTextChange, onInputButtonClick, onButtonClick, errorCommon} = props;

    return (
        <div>
            <form>
                <table>
                    <tr>
                        <td>
                            <div className="alert alert-danger">{errorCommon}</div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input
                                name="name"
                                type={inputTextType}
                                className="form-control"
                                value={model.name}
                                onChange={onInputTextChange}/>
                        </td>
                    </tr>                    
                    <tr>
                        <td>                            
                            <input
                                type="button"
                                className="form-control"
                                value="Input Button Click"
                                onClick={onInputButtonClick} />                            
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <button
                                type="submit"
                                value='Click'
                                className="btn btn-primary"
                                onClick={onButtonClick}>
                                Button Click
                            </button>                            
                        </td>
                    </tr>
                </table>
            </form>
        </div>        
    );    
}

TestForm.defaultProps ={
    inputTextType: "text"
}

//========================================================//

//..src/components/atoms/index.tsx

export * from './TestForm';

//========================================================//

//../src/components/testpage/index.tsx

import * as React from 'react';
import { TestForm, TestProps } from '@c2/component-library';

export default class extends React.Component<{}, {model: TestProps, errorCommon: string}> {
    state = {
                model: {
                    name: ""
                },
                errorCommon: ""             
            };

    onInputTextChange = (event: React.ChangeEvent<HTMLInputElement>) => {
        const field = event.target.name;
        const model = this.state.model;
        model[field] = event.target.value;

        return this.setState({model: model});
    };

    onInputButtonClick = (event: React.MouseEvent<HTMLInputElement>) => {
        event.preventDefault();

        if(this.validation())
        {
            alert("Hello "+ this.state.model.name + " from InputButtonClick.");
        }
    };

    onButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
        event.preventDefault();

        if(this.validation())
        {
            alert("Hello "+ this.state.model.name+ " from ButtonClick.");
        }
    };

    validation = () => {
        this.setState({ 
            errorCommon: ""
        });

        var errorCommonMsg = "";
        if(!this.state.model.name || !this.state.model.name.length) {
            errorCommonMsg+= "Name: *";
        }

        if(errorCommonMsg.length){
            this.setState({ errorCommon: errorCommonMsg });        
            return false;
        }

        return true;
    };

    render() {
        return (
            <TestForm model={this.state.model}  
                        onInputTextChange={this.onInputTextChange}
                        onInputButtonClick={this.onInputButtonClick}
                        onButtonClick={this.onButtonClick}                
                        errorCommon={this.state.errorCommon} />
        );
    }
}

//========================================================//

//../src/components/home2/index.tsx

import * as React from 'react';
import TestPage from '../TestPage/index';

export const Home2: React.SFC = () => (
  <div>
    <h1>Home Page Test</h1>
    <TestPage />
  </div>
);

注：テキストボックスにファイルされたバインディングの場合、「name」属性と「property name」（例：model.name）は同じである必要があり、「onInputTextChange」のみが機能します。「onInputTextChange」ロジックは、コードによって変更できます。

Question 11

このようなものはどうですか：

let __memo = null;
const myHandler = props => {
  if (!__memo) __memo = e => props.dispatch(something());
  return __memo;
}

const myComponent = props => {
  return (
    <button onClick={myHandler(props)}>Click Me</button>
  );
}

しかし、例のように、onClickを下位/内部コンポーネントに渡す必要がない場合、これは実際にはやり過ぎです。