Добавление нескольких функций в onChange с реагированием и реагированием

Question

Я использую https://github.com/andrerpena/react-mde, чтобы попытаться настроить интерактивную страницу справки для сайта, который я создаю. У меня работает редактор уценок, но проблема в том, что каждый раз, когда редактирование выполняется, оно нигде не сохраняется. Ниже приведен соответствующий код для работы редактора уценок.

const [value, setValue] = React.useState("**Hello world!!!**");
const [selectedTab, setSelectedTab] = React.useState("preview");
  return (
    <>
    <div className="container">
      <ReactMde
        value={value}
        onChange={setValue}
        selectedTab={selectedTab}
        onTabChange={setSelectedTab}
        generateMarkdownPreview={markdown =>
          Promise.resolve(converter.makeHtml(markdown))
        }
      />
    </div>

Я планирую исправить эту проблему, передавая значение в отдельную функцию каждый раз, когда пользователь переключается на вкладку предварительного просмотра редактора. это сохраняет то, что они в настоящее время имеют в бэкэнде. Проблема в том, что я не могу найти способ добавить функцию в onTabChange. Я также попытался добавить функцию в onChange, которая обновляла бы бэкэнд каждый раз, когда значение менялось, но я также не мог понять это. Я довольно новичок, чтобы реагировать, и мне любопытно, есть ли лучший способ сделать то, что я пытаюсь сделать, или кто-нибудь может придумать, как добавить вторую функцию к одному из этих двух вызовов.

Заранее спасибо.

Answer 1

Вы могли бы ( следует ) думать больше Реагировать. В функциональных компонентах вы можете использовать эффект для вызова переданного обратного вызова с текущим значением (или вкладкой).

Пример:

const onChangeValue = value => console.log('VALUE CHANGED:', value);
const onChangeTab = value => console.log('TAB CHANGED:', value);

Передача обратных вызовов и использование обработчиков эффектов для ответа к изменениям в состоянии:

export default function App({ onChangeTab, onChangeValue }) {
  const [value, setValue] = useState("**Hello world!!!**");
  const [selectedTab, setSelectedTab] = useState("write");

  useEffect(() => {
    onChangeValue(value);
  }, [onChangeValue, value]);

  useEffect(() => {
    selectedTab === "preview" && onChangeTab(value);
  }, [onChangeTab, selectedTab, value]);

  return (
    <div className="container">
      <ReactMde
        value={value}
        onChange={setValue}
        selectedTab={selectedTab}
        onTabChange={setSelectedTab}
        generateMarkdownPreview={markdown =>
          Promise.resolve(converter.makeHtml(markdown))
        }
        loadSuggestions={loadSuggestions}
        childProps={{
          writeButton: {
            tabIndex: -1
          }
        }}
      />
    </div>
  );
}

Answer 2

Вы можете создавать функции для обработки onChange и onTabChange вместо прямого вызова изменения состояния:

const handleChange = (value) => {
  // Update the state
  setValue(value);
  // Do something else with value
  ...
}

<ReactMde
  value={value}
  onChange={handleChange}
  ...