button根据条件禁用或可用

button根据条件禁用或可用：

需求：点击编辑，可操作“添加”，新增的字段可以修改删除，已有的字段不能进行任何操作

思路：
1.table中的column用render渲染出修改和删除两个button，button根据条件禁用或可用
2.点击添加一行后弹出模态框，模态框（form表单）点击确定时拿到form表单的数据，在确定的回调中自定义一个字段，我定义的是isAbled，key和value都随便定义，主要目的就是用来区分是否为新增的list
3.在column的render函数中可以拿到当前的行数据
4.给button添加disabled属性，属性值为变量，也就是如果record.isAbled存在，disabled为false（不禁用），不存在则disabled为true

column中操作列代码如下：

 {
      label: "操作",
      prop: "action",
      width: 180,
      align: "center",
      render: (record, text, index) => (//render渲染函数，参数为当前行的值，行数据，行索引
        <>
          <span>
              <Button
                type="link"
                disabled={!record.isAbled}//不存在则disabled为true,禁用button按钮
                onClick={() => this.onModife(record, text, index)}
              >修改
              </Button>
          </span>
           <span>
              <Button
                type="link"
                disabled={!record.isAbled}
                onClick={() => this.onDelete(record, text, index)}
              >删除
              </Button>
          </span>
        </>
      ),
    },

点击添加弹出模态框，保存后的回调：

 onSubmit = async (callback) => {
    let { form } = this.state;
    const dataList = [...this.state.dataSource];//数据源
    const valid = await this.formRef.current.validate();//表单验证
    if (valid) {
        dataList.push({ ...form, isAbled: 1 });//isAbled为自定义字段，用来区分是否为新增的list
        this.setState({ dataSource: dataList });
        Message.success("添加成功!");
      } 
      form = {//清空表单
       name："";
       age:"";
      };
      this.setState({ form });
      this.add.current.hide();//关闭模态框
    }
    callback();
  };

---

总结

1.创造条件判断的思维很重要
2.record可以当前行数据别忘记别忘记别忘记