मेरे पास एक कोड संपादक है जहां मैं प्रिंट ("हैलो वर्ल्ड") दर्ज करूंगा और बटन जांचता हूं कि यह सही है या रेगेक्स का उपयोग नहीं कर रहा है।

जब मैं बटन क्लिक करता हूं तो अब मुझे जो समस्या मिल रही है वह सफलता या असफल घटक में लोड हो रही है। जब मैं एक सफल या असफल संदेश कंसोल.लॉग करता हूं तो यह काम करता है। अगर इनपुट सही या गलत था तो उपयोगकर्ता को दिखाने के लिए अभी वास्तविक घटकों में लोड करना चाहते हैं।

function Code(props) {
  const [showResults, setShowResults] = React.useState(false);

  const propsValue = props.value;

  const codeValue = useRef();

  function handleChange() {
    const string = codeValue.current.editor.getValue();
    const regex = /^(print\(("|')?hello\sworld!?("|')\))$/gi;
    const match = regex.exec(string);

    if (match) {
      setShowResults(true);
      return <Success />;
    } else {
      return <Fail />;
    }
  }

  return (
    <>
      <ReactAce
        ref={codeValue}
        value={propsValue}
        mode="python"
        theme="github"
       />

      <button className="btn" onClick={handleChange}>
        Run Code
      </button>

    </>
  );
}

export default Code;
-1
StackUnderFlow 12 सितंबर 2020, 18:35

1 उत्तर

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

परीक्षण करने के बाद, आप setState को सफलता या असफल के साथ कॉल कर सकते हैं, फिर अगली बार घटक के चलने पर इसे रेंडर किया जा सकता है:

function Code(props) {
  const [showResults, setShowResults] = React.useState(false);
  const [msgComponent, setMsgComponent] = React.useState(null);

  const propsValue = props.value;

  const codeValue = useRef();

  function handleChange() {
    const string = codeValue.current.editor.getValue();
    const regex = /^(print\(("|')?hello\sworld!?("|')\))$/gi;
    const match = regex.exec(string);

    if (match) {
      setShowResults(true);
      setMsgComponent(<Success />);
    } else {
      setMsgComponent(<Fail />);
    }
  }

  return (
    <>
      <ReactAce
        ref={codeValue}
        value={propsValue}
        mode="python"
        theme="github"
       />

      <button className="btn" onClick={handleChange}>
        Run Code
      </button>
      { msgComponent }
    </>
  );
}

{ msgComponent } को उस स्थान पर डालें जहां आप चाहते हैं कि नया घटक HTML में हो।

जब आप सक्सेस या फेल को क्लियर करना चाहते हैं, तो setMsgComponent(null) करें। उदाहरण के लिए, इसे प्रस्तुत करने के 5 सेकंड बाद इसे साफ़ करने के लिए आप setTimeout भी जोड़ सकते हैं।

0
CertainPerformance 12 सितंबर 2020, 18:54