代码之家 › 专栏 › 技术社区 › James

是否可以使用onClick在React中以较短的方式编写?

arrow-functions text-to-speech onclick reactjs

James · 技术社区 · 3 年前

现在,我的代码正在按预期工作,但我想知道是否有一种更短的编写方法。我在React中使用speaktts,它由一个常量组成,我希望文本通过文本到语音的对话。我有一个handleClick函数,然后用户必须单击按钮才能听到这个词。如果用户单击声音表情符号,他们将听到苹果、香蕉和胡萝卜的声音。我有没有办法把它缩短一点?


import React from "react";
import Speech from "speak-tts";

function Alphabet() {
  const [say1] = React.useState("apple");
  const [say2] = React.useState("banana");
  const [say3] = React.useState("carrot");
  const speech = new Speech();
  speech
    .init({
      lang: "en-US",
      rate: 0.4,
    })
    .then((data) => {
      console.log("Speech is ready, voices are available", data);
    })
    .catch((e) => {
      console.error("An error occured while initializing : ", e);
    });

  const handleClick1 = () => {
    speech.speak({
      text: say1,
    });
  };

  const handleClick2 = () => {
    speech.speak({
      text: say2,
    });
  };

  const handleClick3 = () => {
    speech.speak({
      text: say3,
    });
  };
  return (
    <>

          <h2>Apple</h2>
          <button
            value="Apple"
            onClick={handleClick1}
            alt="click here for pronounciation"
            className="buttonSound"
          >
            ð
          </button>

          <h2>Banana</h2>
          <button
            value="Banana"
            onClick={handleClick2}
            alt="click here for pronounciation"
            className="buttonSound"
          >
            ð
          </button>

          <h2>Carrot</h2>
          <button
            value="Carrot"
            onClick={handleClick3}
            alt="click here for pronounciation"
            className="buttonSound"
          >
            ð
          </button>


    </>
  );
}

export default Alphabet;

2 回复 | 直到 3 年前

CertainPerformance 3 年前

转动 <h2> 和 <button> 将其转换为自己的组件。看起来唯一更改的值是标题文本,它也是 value 对于按钮,它也是传递给的文本 .speak 单击。文本不需要状态,因为文本不会更改。

所以,把演讲对象和文本作为道具传递下去。

你也不应该打电话 new Speech 每次组件渲染时。改为只创建一次,使用ref或state。

const Word = ({ text, speech }) => (
    <>
        <h2>{text}</h2>
        <button
            value={text}
            onClick={() => speech.speak({ text })}
            alt="click here for pronounciation"
            className="buttonSound"
        >
            ð
        </button>
    </>
);

function Alphabet() {
    const [speech] = useState(() => new Speech());
    useEffect(() => {
        speech
            .init({
                lang: "en-US",
                rate: 0.4,
            })
            .then((data) => {
                console.log("Speech is ready, voices are available", data);
            })
            .catch((e) => {
                console.error("An error occured while initializing : ", e);
            });
    }, []);

    return (
        <>
            <Word text="Apple" speech={speech} />
            <Word text="Banana" speech={speech} />
            <Word text="Carrot" speech={speech} />
        </>
    );
}

Ahmad Faraz 3 年前

我希望这段代码将对您有所帮助,您将从这段代码中学到一些东西。谢谢

import React from "react";
import Speech from "speak-tts";

function Alphabet() {
  const data = [
    {
      name: "Apple"
    }, 
    {
      name: "Banana"
    },
    {
      name: "Carrot"
    }
  ]

  const speech = new Speech();

  speech
    .init({
      lang: "en-US",
      rate: 0.4,
    })
    .then((data) => {
      console.log("Speech is ready, voices are available", data);
    })
    .catch((e) => {
      console.error("An error occured while initializing : ", e);
    });

  const handlePlay = (text) => {
    speech.speak({
      text: text,
    });
 }

  return (
    <>
      <h2>Apple</h2>
          {data.map(d => (
            <button
              value={d.name}
              onClick={() => handlePlay(d.name.toLowerCase())}
              alt="click here for pronounciation"
              className="buttonSound"
            >
              ð
            </button>
      ))}
    </>
  );
  
}

export default Alphabet;