Mam komponent przycisku przełącznika, który jest eksportowany do innego komponentu (menedżera odbiorców) w komponencie menedżera odbiorców. Zwracam komponent przełącznika i komponent div, który mówi WYŁĄCZONY. Jak zmienić tekst elementu DIV na WŁ., Gdy składnik przełącznika przełącza / zmienia swój stan.

type Props = {
   children: any;
   color?: string;
 };
 const Switch = (props:Props) => {
  const [change, setChange] = useState(false)
  
  let SwitchClass = ''
  if(props.color === 'primary') SwitchClass = ' switch-primary'
  if(props.color === 'success') SwitchClass = ' switch-success'
  if(props.color === 'info') SwitchClass = ' switch-info'

  return (
    <div className={'switch-box ' + (change ? SwitchClass : '')} onClick={() => {
      setChange(!change)
    }} >
      <div className={'switch-inner-box' + (change ? ' switch-inner-box-move': '')}> </div>
    </div>
  );
  
};

export default Switch
 const AudienceManage = (props:Props) => {
	const [change, setChange] = useState(false)

	function doSomething () {
		let x = document.getElementById('myDiv');
		if (x.innerHTML === "OFF") {
			x.innerHTML = "ON";
		} else {
			x.innerHTML = "OFF";
	}
}

	return (
			<PageContainer>
					<h1>
							AudienceManage 
					</h1>   
	        
				 <div id='myDiv'>OFF</div>
        <Switch  onClick={doSomething} color='primary'/> <br/>
			
			</PageContainer>
	);
};

export default AudienceManage;
0
Fulano 19 listopad 2019, 14:34
Czy możesz umieścić swój kod na stackblitz?
 – 
Samarth Saxena
19 listopad 2019, 14:48

2 odpowiedzi

Możesz rzucić okiem na moją próbkę, odtwarzając swoje pożądanie. Zasadniczo przekazujesz funkcję z komponentu nadrzędnego do komponentu <Switch />.

W ramach tego komponentu <Switch /> wywołujesz przekazaną właściwość, aby zaktualizować zakres nadrzędny.

import React, { useCallback, useState, useEffect } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

const Switch = ({ onChange }) => {
  const [state, setState] = useState(false);
  const onClickHandler = useCallback(() => {
    setState(!state);
  }, [state]);

  useEffect(() => {
    onChange(state);
  }, [state]);

  return <button onClick={onClickHandler}>Switch {state.toString()}</button>;
};

function App() {
  const [value, setValue] = useState(false);
  const onSwitchClicked = useCallback(switchState => {
    console.log("switch: ", switchState);
    setValue(switchState);
  }, []);
  return (
    <div className="App">
      <h1>Switch state: {value.toString()}</h1>
      <Switch onChange={onSwitchClicked} />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);


Łącze demonstracyjne: https://codesandbox.io/s/epic -hugle-29nwb?fontsize=14&hidenavigation=1&theme=ciemny

Mam nadzieję, że to pomoże,

2
Duc Hong 19 listopad 2019, 16:59

W Twoim kodzie jest wiele błędów. W tym przykładzie AudienceManage powinno zachować stan i zmienić procedurę obsługi twojego komponentu toggle i przekazać oba z nich przez właściwości. Komponent Switch może być bezstanowy i używać właściwości do wyświetlenia swojego stanu oraz właściwości obsługi do zmiany stanu w komponencie nadrzędnym. Ta zmiana stanu spowoduje ponowne renderowanie, a komponent Switch będzie odzwierciedlał prawidłowy stan.

Ten link może być pomocny: Podnoszenie stanu – React Docs

0
Ashkan Pourghasem 19 listopad 2019, 14:45