ラジオボタン３つのうち２つを同じ値にしたい、しかしonChangeイベントは発動するようにしたい

Question

前提・実現したいこと

現在Reactの勉強をしています。
React,Formikを使っています。

ラジオボタンが現状３つあり、そのうち２つは同じvalueを持たせる設計です。

「犬派」「犬派（理由あり）」を選択したときは、その下に新たに描画します

以下はイメージです。Formikを使えてはいません
https://codesandbox.io/s/priceless-kilby-l2bbb?file=/src/App.js

設計としてはラジオボタンの「犬派」「犬派（理由あり）」はdogとし、
その下に描画されるコンポーネントでdog,dog_riyuuをパラメータとして渡すようにします。

しかしその実装方針や方法がわかりません。
アドバイスいただけないでしょうか？

試したこと

ここに問題に対して試したことを記載してください。

・hiddenのフィールドを置いて、radioButtonのchangeイベントでそのフィールドに値を設定し、リクエストを投げる方針を思いつきましたが、実装方法がわかりません。Reactにinput type='hidden'はあるのか

追記

すみません、うまくやりたいことの意図が伝えられていなかったかもしれません。
基本的にラジオボタンはmustで、ラジオボタン郡はname="animal"的な感じです。そのanimalの値がcatとdogと区別したいです。
その上でラジオボタンの２つ目と３つ目を押したときにvalue値はdogとして送られるけど、表示領域が変わるようにしたいです
https://codesandbox.io/s/admiring-brattain-dzbkl?file=/src/App.js:0-949

import React from "react";

function App() {
  const [val, setVal] = React.useState("cat");

  const handleChange = (e) => setVal(e.target.value);

  return (
    <>
    {/* Field name='animal'的な*/}
      <label>
        <input
          type="radio"
          value="cat"
          onChange={handleChange}
          checked={val === "cat"}
        />
        猫派
      </label>
      <label>
        <input
          type="radio"
          value="dog"
          onChange={handleChange}
          checked={val === "dog"}
        />
        犬派（理由なし）
      </label>
      <label>
        <input
          type="radio"
          value="dog" // 送信されるvalue値としては２つ目もここも'dog'としたい
          onChange={handleChange}
          checked={val === "dog"}
        />
        犬派（理由あり）
      </label>
      {/*//TODO 犬派(理由なし)を押したときに表示したい*/}
      {<p>犬派(理由なし)</p>}
      {/*//TODO 犬派（理由あり）を押したときに表示したい*/}
      {<p>犬派（理由あり）です</p>}
    </>
  );
}

export default App;

Comments

[hoshi-takanori]

フォームの処理は、ブラウザが直接 form として送信するってことですか？ それとも js で処理しますか？

[k49977]

formはformikを使って処理します。
あとはaxiosでAPIを叩いてrails連携をしてrails側でDBに保存します。
あとはreduxとか使っています。
すみません、少し質問を理解しきれておらず、答えになっていないかもしれません

[hoshi-takanori]

formik 使ったことないので外してるかもですが、そのラジオボタンの選択内容を axios で API に送信するなら、その際にパラメータを好きなように設定できるのでは、ということです。

[k49977]

ふむふむ。なるほどです！ありがとうございます。試してみます！

[k49977]

ありがとうございます！hoshi-takanori様の開発方針でやりたいことができました。
onSubmit時にanimal='dog_riyuu_ari'の場合は、'dog_riyuunashi'と条件分岐を入れれば対応できました。
ありがとうございます。

Answer 1

valueを同じにする必要があるのかはわかりませんが、やりたいことはこういうことでしょうか？
ボタンをコンポネント化して、取得したvalueに対し、indexOfメソッドでdogを含むか確認してから、あとはそれを表示するなり、制御に用いるなりするといいでしょう。

import React from "react";

const Animal = (props) => {
  const { handleChange } = props;
  return (
    <input
      type="radio"
      name="animal"
      onChange={() => {
        handleChange();
      }}
    />
  );
};

function App() {
  const [val, setVal] = React.useState("");
  const getVal = (e) => {
		let val = ""
    if(e.indexOf('dog') !== -1){
			val = "犬派です"
		}else if(e.indexOf('cat') !== -1){
			val = "猫派です"
		}
		setVal(val)
  };
  const setKey = (animal) => {
    return (
      <Animal
        value={animal}
        handleChange={() => {
          getVal(animal);
        }}
      />
    );
  };

  return (
    <>
      <label>
        猫派
        {setKey("cat")}
      </label>
      <label>
        犬派（理由なし）
        {setKey("dog")}
      </label>
      <label>
        犬派（理由あり）
        {setKey("dog_riyuu")}
      </label>
      <p>{val}</p>
    </>
  );
}

export default App;

Comments

[k49977]

ありがとうございます。確認させて頂きますmm

[k49977]

indexOfの考え方はなかったので参考になりました。
少し目的を再度追記に書かせていただきましたのでご覧になっていただければ幸いです。

[k49977]

onSubmit時にanimal='dog_riyuu_ari'の場合は、'dog_riyuunashi'と条件分岐を入れれば対応できました。
ご回答頂きありがとうございます。