結合した文字列を関数として使用したい

Question

Reactのコードですが、Javascriptの質問になると思います。
テキストフィールドをonChangeした時に、First NameとLast Nameからvalueを取得するコードです。

import React, {useState} from "react";

function App() {

  const [fName, setfName] = useState('');
  const [lName, setlName] = useState('');

  const handlefName = (e) => {
    name = e.target.name;
    setfName(e.target.value);
  }
  const handlelName = (e) => {
    name = e.target.name;
    setlName(e.target.value);
  }

  return (
    <div className="container">
      <h1>Hello {fName} {lName}</h1>
      <form>
        <input onChange={handlefName} name="fName" placeholder="First Name" />
        <input onChange={handlelName} name="lName" placeholder="Last Name" />
        <button>Submit</button>
      </form>
    </div>
  );
}

export default App;

イメージ画像です。

その際に、以下の関数をまとめたいと思っています。

const handlefName = (e) => {
  name = e.target.name;
  setfName(e.target.value);
}
const handlelName = (e) => {
  name = e.target.name;
  setlName(e.target.value);
}

下記のようにまとめて一つの関数にできたらなと思ったのですが、funcはfunctionとして認識されませんでした。

const handleName = (e) => {
  const name = e.target.name;
  const func = 'set' + name;
  func(e.target.value);
}

このような文字列を関数として認識させるにはどのようにすればよいのでしょうか？
よろしくお願いいたします????‍♂️

Answer 1

このような文字列を関数として認識させるにはどのようにすればよいのでしょうか？

基本的に、やってはいけません。ローカル変数はそのように使うものではありません。

いちおう、このような方法はありえます。

  const [fName, setfName] = useState('');
  const [lName, setlName] = useState('');
  const setters = { fName: setfName, lName: setlName };

  const handleName = (e) => {
    const name = e.target.name;
    setters[name](e.target.value);
  }

もっとも、別な変数に書き込むハンドラは、真っ正直に別々で作っておいたほうがいいかとは思います。

Comments

[greenisland]

やってはいけないことだったんですね。勉強になりました。
一応の方法も教えて頂けて、ありがたいです。
ありがとうございました????‍♂️

[quadii.shii]

文字列として与えたデータを関数として実行できてしまう仕様になっていると、アクセスレベルによるセキュリティ管理に穴が開きますね。