时间戳

首页 > 解决方案 > 禁用反应开关

reactjs - 禁用反应开关

问题描述

我是新来的反应并试图禁用地图功能中的反应开关按钮。它应该在用户在输入文本字段中输入键后启用。我试图在 componentWillUpdate 上启用它，但它说超出了最大调用堆栈大小。

constructor(props){
        super(props)
        this.state ={
            keyValues  : '',
            tokenValues : '',
            urlValues : '',
            checked : false,
            displayDetails : false,
            disableSwitch : true
        }
        this.toggleFunction = this.toggleFunction.bind(this);
    }

这是我当地的州。

toggleFunction = (id ) =>{     
        let data =[];
        let loggedInUserEmail = JSON.parse(localStorage.loggedInUserDetails).email;

        data.push({
            projectId :  id,
            keyValues : this.state.keyValues,
            urlval : this.state.urlValues,
            tokens : this.state.tokenValues,
            email : loggedInUserEmail
        })  

        if(this.state.keyValues !== ''){
            this.props.dispatch(abc(data)) 
        }
    }

这是我的切换功能。

<Table cellpadding="5px" cellspacing="10px" type = 'SETTINGS_JIRA' tableClass = 'settings-jira-table'>
                    {listOfProj.map((item , index) => {
                        return(
                            <Row>
                                <Cell key = {index} cellClass = 'settings-jira-projects' > {item.get('projectTitle').toUpperCase()} </Cell>
                                <Cell> <input type='text' onChange = {(e) => this.setState({keyValues:e.target.value })}  className ='settings-jira-textfield' /> </Cell>
                                <Cell> <input type='text' onChange = {(e) => this.setState({tokenValues : e.target.value})} className ='settings-jira-textfield' /> </Cell>
                                <Cell> <input type='text' onChange = {(e) => this.setState({urlValues : e.target.value})}  className='settings-jira-textfield' /></Cell>
                                <Cell >
                                    <label htmlFor="material-switch">
                                        <Switch
                                            checked={this.state.checked}
                                            onChange ={() => {this.toggleFunction(item.get('projectId'))}}
                                            onColor="#86d3ff"
                                            onHandleColor="#2693e6"
                                            handleDiameter={25}
                                            uncheckedIcon={false}
                                            checkedIcon={false}
                                            boxShadow="0px 1px 5px rgba(0, 0, 0, 0.6)"
                                            activeBoxShadow="0px 0px 1px 10px rgba(0, 0, 0, 0.2)"
                                            height={17}
                                            width={45}
                                            className="react-switch"
                                            id="material-switch"
                                            disabled= {this.state.disableSwitch}
                                        />
                                    </label>
                                </Cell>
                            </Row>
                        )
                    })}
                </Table>

尝试在生命周期组件中启用它

componentWillUpdate(){
        if(this.state.keyValues !== ''){
            this.setState(prevState => ({
                disableSwitch : !prevState.disableSwitch
            }))
        }
    }

谢谢！

标签： reactjs

解决方案

当我们调用this.setState它调用的方法时componentWillUpdate，这就是您的组件进入递归状态的方式，如果我们触发状态更改，componentWillUpdate()我们将最终陷入无限循环。我认为您需要更好地办理登机手续componentWillUpdate

推荐阅读