yang9483
yang9483
2021-01-18 14:19

antd动态增删表单的时候,多个选择框共用一个onchange事件来控制另一个控件的显示或者隐藏

  • react.js

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条回答