设置参数并使用 onClick() 调用函数

Question

我有一个表单，里面有一些字段，可以用语音识别来填充。我点击一个按钮播放音频，然后语音识别开始收听。

问题是由于某些原因 setBtnName('name') 没有设置值，我得到一个错误 __.mp3 doesn't exist.

我认为我调用函数 playName() 的方法 sets 一个参数并在其中调用另一个 function 是不正确的。也许有人知道另一种设置参数并直接使用 onClick() 调用函数的方法？

const [btnName, setBtnName] = useState('')

function playName(){
   setBtnName('name')
   playSound()
}

function playAge(){
   setBtnName('age')
   playSound()
    }

const audio = [`${btnName}.mp3`]

function playSound(){
//Play sound and start recognition 
}

useState(){
//use {btnName} as a value for json file to compare it with transcript
}
    return (
    <div>
      <p>Microphone: {listening ? 'on' : 'off'}</p>
      <button
        onClick={playName}
        type="button"> Name
      </button>
      <button
        onClick={playAge}
        type="button"> Age
      </button>
      <div>{name}</div>
      <div>{age}</div>
    </div>
  )

Answer 1

您在 playSound 中使用您的 buttonName 还是 audio？在这种情况下，它还不存在。 setBtnName 将在下次渲染时生效。

您需要 playSound('age') / playSound('name') 或 useRef 或 setTimeout 或组合 useState 和 useEffect。所以有几种方法。

只是其中一种看起来更像您想要实现的方式：

function playName(){
   setBtnName('name')
   playSound('name')
}

function playAge(){
   setBtnName('age')
   playSound('age')
    }



function playSound(name){
const audio = [`${name}.mp3`]
//Play sound and start recognition 
}

设置参数并使用 onClick() 调用函数

Set an argument and call a function with onClick()

reactjs

react-hooks