Reactjs - React の選択オプションの変更に基づいてラジオ ボタンが正しく更新されない

2 つのオプションを含む選択ドロップダウンと 2 つの値を含むラジオ ボタンがあります。 (以下のコードを参照) ページがロードされると、「象限 1」が表示されます。はデフォルトの選択オプションであり、デフォルトではラジオ ボタンはどれも選択されません。

「象限 1」の場合選択オプションの「いいえ」を選択します。ラジオボタンで。 「第 2 象限」の場合選択オプションの「はい」を選択します。これらの値は「グリッド」に保存されます。それに応じて状態を示します。変更が加えられるたびに、これらの更新を状態で正常にキャプチャできます。

しかし、選択オプションを切り替えても、ラジオ ボタンはそれに応じて変更されません。 「チェック済み」を更新する必要があることはわかっています。選択オプションが変更されるたびにラジオ ボタンのプロパティ。しかし、私にはそれができません。私は ReactJS を初めて使用しており、ここ 1 週間頭を悩ませているため、間違っている場合はご容赦ください。

選択オプションが変更されるたびにラジオ ボタンを更新できるようにご協力ください。

Updated RuleScreen.js:

[Correct Grid State details but radio button not updated][1]
import React, { Component } from "react";
import M from "materialize-css";
import dropDownList from "./dropDown";
import _ from "lodash";

class RuleScreen extends Component {

  constructor(props){
    super(props);
    this.state = {
      quad: "Q1",
      grid: [{id:"Q1", optin:"",NL:""}, {id:"Q2", optin:"", NL:""}]
    };
  }

  componentDidMount() {
    var elems = document.querySelectorAll('select');
    M.FormSelect.init(elems, {hover: true, coverTrigger: false});
  }

  quadChange = async (e) => {
    await this.setState({ quad:e.target.value});
  }

  optinChange = async (e) => {
    const currQuad = this.state.quad;
    const value = e.target.value;
    await this.setState(prevState => ({
      grid: prevState.grid.map(
        item => item.id === currQuad? { ...item, optin: value}: item
      )
    }))
  }

  render() {
    const selectedGrid = this.state.grid.filter(quad=>quad.id === this.state.quad)
    return (
      <div>
        <h3>Rule Setup</h3>
        <div className="container">
          <div className="btn">
            <select required value={this.state.quad} onChange={this.quadChange}>
              <option key="Q1" value="Q1">Quadrant 1</option>
              <option key="Q2" value="Q2">Quadrant 2</option>
            </select>
          </div>
          <form>
            <label>Opt In</label>
            <label><input id="yes" checked={selectedGrid[0].optin=== 'yes' } onChange={this.optinChange} value="yes" className="with-gap" name="optin" type="radio"/>
                <span>Yes</span>
            </label>
            <label><input id="no" checked={selectedGrid[0].optin=== 'no' } onChange={this.optinChange} value="no" className="with-gap" name="optin" type="radio"/>
                <span>No</span>
            </label>
          </form>
        </div>
      </div>
    );
  }
}


export default RuleScreen;

配列関数を使用しているため、関数を「this」にバインドする必要はありません。 コードをテストしていませんが、アイデアはここにあります。 ラジオ ボタンに値を追加し、値のゲッターを削除し、レンダリング時のグリッドにセレクターを追加します。

class RuleScreen extends Component {

      constructor(props){
        super(props);
        this.state = {
          quad: "Q1",
          grid: [{id:"Q1", optin:"", NL:""}, {id:"Q2", optin:"", NL:""}]
        };
      }

      componentDidMount() {
        var elems = document.querySelectorAll('select');
        M.FormSelect.init(elems, {hover: true, coverTrigger: false});
      }

      quadChange = (e) => {
        this.setState({ quad:e.target.value});
      }

      optinChange = (e) => {
        const currQuad = this.state.quad;
        const value = e.target.value;
        this.setState(prevState => ({
          grid: prevState.grid.map(
            item => item.id === currQuad? { ...item, optin: value}: item
          )
        }))
      }
      

      render() {
        const selectedGrid = this.state.grid.filter(quad=>quad.id === this.state.quad) //maybe with [0] at the end
        return (
          <div>
            <h3>App Name</h3>
            <div className="container">
              <div className="btn">
                <select required value={this.state.quad} onChange={this.quadChange}>
                 <option key="Q1" value="Q1">Quadrant 1</option>
                 <option key="Q2" value="Q2">Quadrant 2</option>
                </select>
              </div>
              <form>
                <div>Opt In</div>
                <label>
                  <input id="yes" checked={selectedGrid.optin === 'yes'} onChange={this.optinChange} value="yes" className="with-gap" name="optin" type="radio"/>
                    <span>Yes</span>
                </label>
                <label>
                  <input id="no" checked={selectedGrid.optin === 'no'} onChange={this.optinChange} value="no" className="with-gap" name="optin" type="radio"/>
                    <span>No</span>
                </label>
              </form>
          </div>
        )
      }
}


export default RuleScreen;

4

前述のようにコードを更新しました (質問ブロックのコードを参照)。しかし、今は「チェック」することができません。いずれかのラジオボタン。ただし、optinChange 関数は機能し、状態は問題なく更新されています。しかし、ラジオボタンはチェックされていないようです。何が間違っているのかわかりません。

2020 年 9 月 5 日 8:50

どうもありがとうございました。この問題は、 selectedGrid selected={selectedGrid[0].optin==="yes"} に [0] を追加すると解決しました。

2020 年 9 月 5 日 9:01

はい、これで終わりです。Array.filter は配列を返すからです。

2020 年 9 月 5 日 9:04

ここで実行できます: const selectedGrid = this.state.grid.filter(quad=>quad.id === this.state.quad)[0]

2020 年 9 月 5 日9:05