yang9483
2021-01-18 14:19antd动态增删表单的时候,多个选择框共用一个onchange事件来控制另一个控件的显示或者隐藏
handleSelectChange改变选择框状态,value为2时,让另一个选择框显示,多个选择框是同一个change事件,所以当其中一个选择框为2时,其他的选择框下面被隐藏选择框都会展示
const arr = []
questionAnswers && questionAnswers.forEach((item,index) => arr.push(index))
getFieldDecorator('keys', { initialValue: questionAnswers.length ? arr : [0] })
const keys = getFieldValue('keys');
const formItems = keys.map((k, index) => (
<FormItems key={k}>
<div className="remove-left">
<FormItemStyled label={`问题答案 ${index+1}`} colon={false} {...formItemLayout}>
{getFieldDecorator(`ttsAnswer[${k}]`, {
initialValue: questionAnswers[k] ? questionAnswers[k].ttsAnswer: '',
})(<TextareaStyled />)}
</FormItemStyled>
<Removea>
{keys.length > 1 ? (<span onClick={() => this.remove(k)}>删除</span>) : null}
</Removea>
</div>
<FormItemStyled label="回答后" colon={false} {...formItemLayout} className='answer'>
{getFieldDecorator(`answerType[${k}]`, {
initialValue: questionAnswers[k] ? this.changeAnswerTypeText(questionAnswers[k].answerType) : '',
rules: [{ required: true, message: '请选择问题类型' }],
})(
<Select onChange={value => this.handleSelectChange(value)}>
<Option value="4">等待被叫回复</Option>
<Option value="1">继续下一流程</Option>
<Option value="2">跳转到指定流程</Option>
<Option value="3">挂断</Option>
<Option value="5">重复当前流程</Option>
</Select>
)}
</FormItemStyled>
{questionAnswers[k] && questionAnswers[k].answerType === 2 || isShowNum === 2 && <FormItemStyled label=" " colon={false} {...formItemLayout} className='answer'>
{getFieldDecorator(`targetNodeId[${k}]`, {
initialValue: questionAnswers[k] ? questionAnswers[k].nodeTitle: '',
})(
<Select style={{ width: 360 }}>
{targetNode && targetNode.map(node => <Option key={node.nodeId}>{node.node}</Option>)}
</Select>
)}
</FormItemStyled>}
{keys.length > 1 && keys.length - 1 !== index ? (<FormLine />) : null}
</FormItems>
));
handleSelectChange = (value) => {
if (value === '2') {
this.setState({ isShow: 'block', isShowNum: 2 });
} else {
this.setState({ isShow: 'none', isShowNum: undefined });
}
}
- 点赞
- 回答
- 收藏
- 复制链接分享
1条回答
为你推荐
- Antd筛选后不能重新触发分页
- react.js
- 2个回答
- 前端大佬........我这个表格点击此处单元格,怎么获取 父级行的数据
- html5
- javascript
- css3
- css
- 1个回答
- antdesign的动态菜单,点击了子菜单时,没有选中效果
- javascript
- css3
- 1个回答
- 用一个 div 填充剩余屏幕空间的高度
- html5
- css
- 0个回答
- 多选框怎样能够实现互斥
- checkbox
- 4个回答