使用Mathquill显示数学函数

如何解决使用Mathquill显示数学函数

我正在使用下面的代码在输入字段中显示数学函数。但是，与其合并函数以创建一个像此cos（√）的方程式，不如说它是。 每个方程式都会添加到已显示的方程式的右侧。例如：cos（）√

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{}}")}>√</button>
      <button onClick={() => injectMathFunction("\\frac{}{}")}>/</button>

    </div>
  );
}

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

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

解决方法

您正在串联两个字符串。您要么需要解析\ cos {}字符串，然后插入新字符串。您可以使用子字符串完成此操作。

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