Блог

У меня есть редактор кода, где я бы ввел print («Привет, мир»), и нажатие кнопки проверяет, правильно это или нет, используя регулярное выражение.

Проблема, с которой я сталкиваюсь сейчас, заключается в загрузке компонента успеха или сбоя при нажатии кнопки. Когда я консолью.зарегистрируйте сообщение об успехе или сбое, оно работает. Просто хочу загрузить фактические компоненты сейчас, чтобы показать пользователю, был ли ввод правильным или неправильным.

 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(("|')?hellosworld!?("|')))$/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;
  

После выполнения теста вы можете вызвать 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(("|')?hellosworld!?("|')))$/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) . Вы также можете добавить setTimeout , чтобы очистить его, например, через 5 секунд после его рендеринга.