yang9483 2021-01-18 14:19 采纳率: 0%
浏览 425

antd动态增删表单的时候,多个选择框共用一个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条回答 默认 最新

  • 海潮2 2021-01-19 17:49
    关注

    啊这。。为啥不 onChange后面定义不同的方法名呢

    评论

报告相同问题?

悬赏问题

  • ¥15 关于#matlab#的问题:期望的系统闭环传递函数为G(s)=wn^2/s^2+2¢wn+wn^2阻尼系数¢=0.707,使系统具有较小的超调量
  • ¥15 FLUENT如何实现在堆积颗粒的上表面加载高斯热源
  • ¥30 截图中的mathematics程序转换成matlab
  • ¥15 动力学代码报错,维度不匹配
  • ¥15 Power query添加列问题
  • ¥50 Kubernetes&Fission&Eleasticsearch
  • ¥15 報錯:Person is not mapped,如何解決?
  • ¥15 c++头文件不能识别CDialog
  • ¥15 Excel发现不可读取的内容
  • ¥15 关于#stm32#的问题:CANOpen的PDO同步传输问题