1. 程式人生 > 其它 >Ant Design和Raect結合開關操作

Ant Design和Raect結合開關操作

Ant Design和Raect結合開關操作

在前端設計中我們會在某個欄位中控制,寫成開關形式是不是比較高階呢?
下面這種形式為輸出型別想要修改需要重新設定個按鈕無法再表格上操作(有其他高招的請不吝賜教)
在這裡插入圖片描述
這種形式可以在表格上操作,是不是比上面要高階點呢? 這個有個問題是如果專案需要控制該欄位修改給特定的人使用則 不推薦使用這種開關的方法 ,解決辦法,還沒想到,有辦法的希望賜教
在這裡插入圖片描述
那麼如何操作呢 ??? 上程式碼


```javascript
//這個是需要修改的方法
 enableChange = (record, checked) => {
        this.setState({
            loading:true
        })
        const isEnable = checked ? "1": "0";
        record.isApproval= isEnable  //這個根據需要修改
        record.branchKey = this.props.selectRow.branchKey
        approvalBranchSchoolUpdate(record,authority.update, () => {
            this.indexQuery();
        });
  };
	
	//在表格中設定渲染元件
	render: (checked, record, index) => {
		return (
			<div>
				
				<Switch  //ant design中的開關元件
					checkedChildren={"是"}
					unCheckedChildren={"否"}
					checked={record.isApproval== "1" ? true : false}
					onChange={this.enableChange.bind(checked, record)}
				/>
				 
			</div>
		);
	},