जब एक रेडियो बटन पर क्लिक किया जाता है (Test.js में कोडित बटनों का सेट) हैंडलक्लिक नामक एक फ़ंक्शन किया जाता है। इसमें मैं सरणी को अद्यतन करता हूं, हालांकि मैं इसे graph_test.js पर फिर से भेजने में विफल रहता हूं। इसलिए graph_test.js को 0 से भरी जाने वाली प्रारंभिक सरणी प्राप्त होती है, लेकिन इसे कभी भी अपडेट किए गए संस्करण प्राप्त नहीं होते हैं।
मैं जो चाहता हूं वह 0 और 1 की एक सरणी है, प्रत्येक सूचकांक एक क्षेत्र का प्रतिनिधित्व करता है। जब एक बटन क्लिक किया जाता है तो 0/1 विपरीत मान में बदल जाता है।
मुझे ग्राफ_टेस्ट के रूप में इसे गतिशील रूप से अपडेट करने की आवश्यकता है, मैं एक ग्राफ पर कोड लाइनों पर जा रहा हूं, जिसके आधार पर सरणी में इंडेक्स के पास 1 है। Test.js - जहां मैं सरणी भरता हूं, बनाता हूं, अपडेट करता हूं

// When radio buttons checked, change corresponding value in array if 0 change to 1 and if 1 change to 0
// This will be used in the graph component, and will enable the functionality of selcting one region or multiple region.
// As the graph will be plotted based on which regions are noted 1 in the array 


import $ from "jquery";
import Graph_Test from "./Graph_Test.js";
import React, { useState } from "react";
const Test = props => {
  const total_regions = (JSON.parse(JSON.stringify(props.test)).length); // gets the number of regions
  const [array, setArray] = useState(Array(total_regions.length).fill(0));
    //when a radio button is clicked change its corresponding in the array

//when a radio button is clicked change its corresponding in the array
const handleClick = (item, idx) => {
  if (array[idx] == 1) {
    array[idx] = 0;
  } else {
    array[idx] = 1;
  }
  setArray(array);
};


  return (
    // displays radio buttons depending on the number of objects in json
    <div>
    <div>
   <Graph_Test array={array} testing={[]} />
    </div>
    <div>
    {props.test.map((item, idx) => { 
      return (
        <label key={idx}>
          <input className="region" type="radio" value={idx} onClick={() => handleClick(item, idx)}/>
          <span>{idx}</span> 
        </label>
      );
    })}  
    </div>

    </div>
  );
};
export default Test;

Graph_test जहां सरणी कहा जाता है:

import React from 'react';
import $ from "jquery";
//<h1>{props.testing.map}</h1>
const Graph_Test = props => { 
  console.log(`ARRRAy ${props.array.length}`);
    return(
      <div>
        <div>
        {props.array && props.array.length > 0 && <p>{props.array[0]}</p> }
        </div>     
        <div>
        {props.testing && props.testing.map((item, idx) => { 
          return (
            <label key={idx}>
              <input className="region" type="radio" value={idx} />
              <span>{idx}</span> 
            </label>
          );
        })}  
        </div>
      </div >
    );
  };export default Graph_Test;

ऐप.जेएस:

import "bootstrap/dist/css/bootstrap.css";
import React from "react";
import ReactPlayer from 'react-player'
import LeftPane from "./components/LeftPane.js";
import Video from "./components/Video.js";
//import Footer from "./components/Footer.js";
import Test from "./components/Test.js";
import Graph_Test from "./components/Graph_Test.js";
//import './App.css';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { apiResponse: [] };

  }
  // Comunicate with API
  callAPI() {
    fetch("http://localhost:9000/IntensityAPI") //React app talks to API at this url
      .then(res => res.json())
      .then(res => this.setState({ apiResponse: res }));
  }
  componentWillMount() {
    this.callAPI();
  }

  render() {
    return (
      <div className="App">
          <div class="row fixed-top fixed-bottom no-gutters"  >
            <div class="col-3 fixed-top fixed-bottom">
              <LeftPane></LeftPane>
            </div>
            <div class="offset-md-3 fixed-top fixed-bottom" >
              <Video></Video>
            </div>
            <div class=" col-3 fixed-bottom">
            <Test test = {this.state.apiResponse}/>
            <Graph_Test testing = {this.state.apiResponse} array={[]}  />

            </div>      
            </div>

      </div>
    );
  }
}
export default App;
//  <Footer test = {this.state.apiResponse}/>

मैंने एक रेत बॉक्स बनाया है। आप 0 देख सकते हैं, इसलिए जब एक रेडियो बटन दबाया जाता है तो मैं चाहता हूं कि यह 0 हो जाए और फिर जब इसे फिर से दबाया जाए तो मैं चाहता हूं कि यह वापस 1 हो जाए। क्या यह राज्यों के साथ किया जाता है? रेडियो बटन की पहली पंक्ति को भी अनदेखा करें, बस इसे परीक्षण उद्देश्यों के लिए वहां रखें, इसकी अगली पंक्ति है कि इसे काम करना चाहिए https://codesandbox.io/s/arraypropproblem-8ec6d ?file=/src/components/Test.js

0
Sue 11 अप्रैल 2020, 19:21

1 उत्तर

सबसे बढ़िया उत्तर

आपका कोडसैंडबॉक्स एक फ़ेच त्रुटि देता है, लेकिन हाँ आप सही हैं: एक सामान्य स्थिति को लागू करने के माध्यम से, आपके दो घटकों के बीच उपयोग किया जाता है, handleClick अपडेट भी graph_test में सही ढंग से दिखाई देगा।

यदि वे भाई-बहन हैं, तो राज्य को मूल घटक तक बढ़ा दें और इसे करना चाहिए। उदाहरण:

class Example extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isClicked: false
    };
  }

  handleClick = () => {
    this.setState({ ...this.state, isClicked: !this.state.isClicked });
  };

  render() {
    return (
      <div>
        <button onClick={this.handleClick}>Click</button>
      </div>
    );
  }
}

export default Example;

और इस अवस्था को किसी अन्य चाइल्ड कंपोनेंट को पास करना जिसे आप इसका उपयोग करना चाहते हैं

1
Slim 11 अप्रैल 2020, 20:10