Ketika tombol radio diklik (kumpulan tombol yang dikodekan dalam Test.js), fungsi yang disebut handleclick dijalankan. Dalam hal ini saya memperbarui array, namun saya gagal mengirim ulang ke graph_test.js. Jadi graph_test.js menerima larik awal yang diisi dengan 0 tetapi tidak pernah menerima versi yang diperbarui.
Yang saya inginkan adalah array 0 dan 1, masing-masing indeks mewakili suatu wilayah. Ketika sebuah tombol diklik, 0/1 berubah menjadi nilai yang berlawanan.
Saya memerlukan pembaruan ini secara dinamis seperti pada graph_test.s, saya akan membuat kode baris pada grafik berdasarkan indeks mana dalam array yang memiliki 1 di sampingnya. Test.js - tempat saya mengisi, membuat, memperbarui array

// 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 di mana array dipanggil:

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;

Aplikasi.js:

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}/>

Saya telah membuat kotak pasir. Anda dapat melihat 0, jadi ketika tombol radio ditekan saya ingin itu berubah menjadi 0 dan kemudian ketika ditekan lagi saya ingin kembali ke 1. Apakah ini dilakukan dengan status? Juga abaikan baris pertama tombol radio, cukup letakkan di sana untuk tujuan pengujian, baris berikutnya yang seharusnya berfungsi https://codesandbox.io/s/arraypropproblem-8ec6d ?file=/src/components/Test.js

0
Sue 11 April 2020, 19:21

1 menjawab

Jawaban Terbaik

Codesandbox Anda mengembalikan kesalahan pengambilan, tetapi ya Anda benar: melalui penerapan status umum, yang digunakan di antara dua komponen Anda, pembaruan handleClick juga akan tercermin dengan benar di graph_test

Jika mereka bersaudara, naikkan status ke komponen induk dan itu harus dilakukan. Contoh:

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;

Dan meneruskan status ini ke komponen anak lain yang ingin Anda gunakan

1
Slim 11 April 2020, 17:10