Javascript 如何检查按钮类的道具?

Javascript 如何检查按钮类的道具?,javascript,reactjs,redux,react-redux,Javascript,Reactjs,Redux,React Redux,目标 我试图编辑现有的代码,在现有按钮下添加一个。现有的按钮是一个麦克风(如下所示),目前允许用户静音和取消静音。(我在图片中添加了文本“静音/取消静音”,只是为了演示我试图添加新文本的位置。根据当前状态,它必须是“静音”或“取消静音” 已经有一种逻辑将图标从一个普通的麦克风更改为一个有线穿过的麦克风。我不能说我理解它是如何工作的 问题 我不是react js编程人员,因此我不知道如何访问现有AudioMutedButton的属性/状态 基类-AudioMuteButton.js 如下所示,基类

目标

我试图编辑现有的代码,在现有按钮下添加一个。现有的按钮是一个麦克风(如下所示),目前允许用户静音和取消静音。(我在图片中添加了文本“静音/取消静音”,只是为了演示我试图添加新文本的位置。根据当前状态,它必须是“静音”或“取消静音”

已经有一种逻辑将图标从一个普通的麦克风更改为一个有线穿过的麦克风。我不能说我理解它是如何工作的

问题

我不是react js编程人员,因此我不知道如何访问现有AudioMutedButton的属性/状态

基类-AudioMuteButton.js

如下所示,基类导出一些状态信息,包括_audioMuted:

_setAudioMuted(audioMuted: boolean) {
    this.props.dispatch(muteLocal(audioMuted));
    console.log("this is setting the mute state")
}

function _mapStateToProps(state): Object {
    const _audioMuted = isLocalTrackMuted(state['features/base/tracks'], MEDIA_TYPE.AUDIO);
    const _disabled = state['features/base/config'].startSilent;

    return {
        _audioMuted,
        _disabled
    };
}
**表示层-AudioSettingsButton.js**

此文件似乎包含显示有问题的音频按钮的层

   import AudioMuteButton from '../AudioMuteButton';

     render() {
        const { isDisabled, onAudioOptionsClick, visible } = this.props;
        const settingsDisabled = !this.state.hasPermissions
            || isDisabled
            || !JitsiMeetJS.mediaDevices.isMultipleAudioInputSupported();

        return visible ? (
            <AudioSettingsPopup>
                <ToolboxButtonWithIcon
                    icon = { IconArrowDown }
                    iconDisabled = { settingsDisabled }
                    onIconClick = { onAudioOptionsClick }>
                    <AudioMuteButton />                        
                </ToolboxButtonWithIcon>
            </AudioSettingsPopup>
        ) : null;
    }
}
从“../AudioMuteButton”导入AudioMuteButton;
render(){
const{isDisabled,onaudioptionsclick,visible}=this.props;
const settingsDisabled=!this.state.hasPermissions
||禁用
||!JitsiMeetJS.mediaDevices.isMultipleAudioInputSupported();
返回可见(

问题

我没有得到任何错误,道具显示在控制台中未定义。 所以我显然没有正确地进入这个州


欢迎提供任何提示。

使用三元运算符检查状态
{this.\u renderAudioButton()==true?true:false}

我看到您有了
audioMuted
属性。现在您需要为组件提供
audioMuted
的状态创建一个处理程序。该处理程序可以是:

const mutedHandler = () => {
  this.setState({audioMuted: !this.audioMuted})
}
然后,您可以添加一个
if
语句来检查
这是否是
true
,例如:

this.audioMuted ? <p>Unmute</p> : <p>mute</p>
this.audiomute?取消静音

:静音


您能展示一下
音频设置按钮的外观吗?您可能需要引入一些新的状态,但很难说不完整component@Anthony请参阅我的更新问题。编辑1部分如何切换麦克风按钮的显示?(假设您有类似于视频的略过显示)@Anthony,我还得再挖一点。(这不是我的代码)。我想既然我可以在控制台日志中看到音频的详细信息……不管是真是假,我都可以用“this”对象以获取当前上下文中的state@Anthony我添加了一些React调试信息,以防它有助于理解对象结构。基本上,当“audioMuted”道具为true时,我想显示一个“Unmute”按钮下方的div,反之亦然。你能再解释一下吗?问题是,我正在试图弄清楚如何/在何处准确访问“音频静音”道具。我需要找到在单击“音频”按钮时触发的方法…而不是将“渲染”按钮改为“右”吗?渲染可能只在开始时调用显示它。你知道一种简单的方法(例如通过调试器)来查找单击处理程序吗?你可以在代码中追溯
audioMuted
道具的来源。通常处理程序位于拥有该状态的同一组件中。k我将尝试对audioMuted进行全局搜索以查看我得到的内容。请检查我帖子中的编辑2
this.audioMuted ? <p>Unmute</p> : <p>mute</p>