Question

我有2个Select下拉菜单，其中3个选项包装在单个组件中。（下面的参考代码）在加载页面时，“象限1”是“第一次选择”中的默认“选择”选项，而“选择一个值”是第二次“选择”下拉菜单中的默认选项。

对于第一个下拉列表的“象限1”，我将在第二个“选择”下拉列表中选择“ 10％”。对于第一个下拉菜单的“象限2”，我将选择“ 30％”。这些值相应地以“网格”状态存储。每当进行更改时，我都能成功捕获状态下的这些更新。

但是当我在第一个“选择”下拉列表中切换值时，第二个“选择”下拉列表并没有相应地更改。它仍然显示相同的值。我知道，只要更改主“选择”选项，我就必须更新第二个“选择”下拉列表的“值”属性。但我无法做到这一点。如果我做错了，请原谅我，因为我是ReactJS的新手，并且在过去的1周内一直不敢动弹。

每当第一个选择下拉列表更改时，请帮助我更新第二个选择下拉列表。

P.S：我还有一个单选按钮，它会按预期变化。只有“第二”下拉列表没有更改。

RuleScreen.js：

import React, { Component } from "react";
import M from "materialize-css";
import gridData from "./gridData";
import axios from "axios";

class RuleScreen extends Component {

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

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

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

  gridChange = (param) => (e) => {
    const currQuad = this.state.quad;
    const value = e.target.value;
        
    if(param==="webminar"){
      this.setState(prevState => ({
        grid: prevState.grid.map(
          item => item.id === currQuad? { ...item, webminar: value}: item
        )
      }))
    }

    if(param==="optin"){
      this.setState(prevState => ({
        grid: prevState.grid.map(
          item => item.id === currQuad? { ...item, optin: value}: item
        )
      }))
    }
  }

  handleSubmit = (e) => {
    e.preventDefault();
    console.log(e.target);
  };

  render() {
    const selectedGrid = this.state.grid.filter(quad=>quad.id === this.state.quad)[0];
    
    return (
      <div style={{backgroundColor:"beige"}}>
        <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>
              <option key="Q3" value="Q3">Quadrant 3</option>
            </select>
          </div>
          <form name="grid" onSubmit={this.handleSubmit}>
              <label>Webminar</label>
              <div className="btn">
                <select required name="grid" value={selectedGrid.webminar} onChange={this.gridChange("webminar")}>
                  <option key="WM0" value="">Select a Value</option>
                  <option key="WM1" value="WM1">10%</option>
                  <option key="WM2" value="WM2">20%</option>
                  <option key="WM3" value="WM3">30%</option>
                </select>
              </div>
              <div>
                <label>Opt In</label>
                <label>
                  <input id="optin1" checked={selectedGrid.optin==="yes"} onChange={this.gridChange("optin")} value="yes" className="with-gap" name="optin" type="radio"/>
                  <span>Yes</span>
                </label>
                <label>
                  <input id="optin2" checked={selectedGrid.optin==="no"} onChange={this.gridChange("optin")} value="no" className="with-gap" name="optin" type="radio"/>
                  <span>No</span>
                </label>
              </div>
          </form>
          <div className="center-align"> 
            <button type="submit" className="btn" onClick={this.handleSubmit}>Lock Rule</button>
          </div>
        </div>
      </div>
    );
  }
}


export default RuleScreen;

选择标签值根据主选择标签动态更改

0 个答案: