Question

我有一个Mic-off和Mic-on按钮，这是使用三元操作实现的切换。 events（JSON数组）是带有event_name和date_time的JSON对象的列表。

{this.props.events.map((event) => (
 <div  key={event.event_name}>
    <div> {this.state.micStates[event.event_name]?
     <span onClick={()=>this.stopRecord(event.event_name)}> <MicOn /> 
     </span> 
     :<span onClick={()=>this.startRecord(event.event_name)}><MicOff />       
    </span>}              
   </div>
   <li style={{color:'pink',}}>{event.date_time}</li>
 </div> ))
}

两种方法： startRecord，StopRecord

startRecord ：它将开始录制并分块存储，并删除先前的事件状态，如果单击多次则将其设置为false

stopRecord ：它将停止mediaRecorder并将文件保存在formData中并将当前状态事件设置为false。

constructor(props) {
    super(props);
    this.state = {
        mics :{},
    }
}
startRecord = event => {
    var size=Object.keys(this.state.mics).length
    if(size<1){
        let {mics}=this.state;
        mics[event]=mics[event]? false : true;
        this.setState({ mics });


        // do the work here
    }
    else{
        this.setState(prevState=>({
            mics:{},
        }));
        console.log("switch other state off");
    }
}

stopRecord = event => {

    let {mics}=this.state;
    mics[event]=mics[event]? false : true;
    this.setState({ mics });
    console.log(Object.keys(this.state.mics).length);

}

如果一个事件为true，那么我不想一次切换多个按钮，那么mics中存在的另一个事件应该为false。

Answer 1

因为this.state.micStates是一个数组。保留一个标志，例如“ isPlaying：true / false”。默认情况下，它将为false。调用play / start记录后，传递数组索引并执行简单的操作来查找和更新数组。只有传递的键才会被设置为true，而在循环时则为false。

从ReactJS的状态对象中删除先前的事件

1 个答案: