reactjs - 使用 Mathquill 显示数学函数

Question

我正在使用下面的代码在输入字段中显示数学函数。然而，与其让函数合并来创建一个像 cos(√) 这样的方程。每个方程式都添加到已显示的方程式的右侧。示例：cos() √</p>

import React, {useState} from 'react'
import { addStyles, EditableMathField  } from 'react-mathquill'


addStyles();

function App(props) {
  const [latex, setLatex] = useState("");
  const injectMathFunction = (latexString) => {
    setLatex((latex) => latex + latexString);
  };
  return (
    <div>
      <EditableMathField
        latex={latex} // latex value for the input field
        onChange={(mathField) => {
          
          setLatex(mathField.latex());
        }}
      />
      <button onClick={() => injectMathFunction("{\\sqrt{}}")}>√&lt;/button>
      <button onClick={() => injectMathFunction("\\frac{}{}")}>/</button>

    </div>
  );
}

我认为问题出在这部分代码中

const injectMathFunction = (latexString) => {
    setLatex((latex) => latex + latexString);
  };

Answer 1

您正在连接两个字符串。您要么需要解析 \cos{} 字符串并插入新字符串。您可以使用子字符串来完成此操作。

或者，您可以插入“\cos{”和“\sqrt{”，然后构建另一个为您关闭它们的函数。