ReactJS:禁用字段

Question

我有一个带有字段的表单，可以从列表中进行选择。

     <Column col={'12'} p={'x-0'}>
        {
          this.props.fields.map( (detailLine, index) => {
            return(
              <Column key={`GoodsServicesDataLines_${index}`} id={`GoodsServicesDataLines_${index}`} className="fieldGroup" col="12">
                <Row m={['l-0','r-0']}>
                  <button type={'button'} className={'w-100 close sub-form-delete-button'} onClick={ () => this.removeLine(index) } />

                    <Column col={["lg-9", "md-8"]}>
                      {
                            utility.field({
                              component: Fields.Select,
                              name: `${detailLine}.code`,
                              label: utility.t("PRODUCT", 'product'),
                              col: ["lg-9", "md-8"],
                              data: this.props.ProductsList || [],
                              disabled: true,
                           }
     </Column>
)

我的问题是，当data字段为this.props.ProductsList时，我应该禁用该字段，而如果数据等于[]，则不应该禁用该字段。在你看来，我该怎么做呢？

谢谢。

编辑：

如果我尝试这样的东西：

disabled: this.props.ProductsList

该字段是禁用的，但如果我添加另一个带有加号按钮的字段，则新字段也是禁用的。

Answer 1

简单地说

disabled: this.props.ProductsList.length === 0,

Answer 2

您可以将disabled:true更改为

disabled: !this.props.ProductsList.length

Answer 3

您可以对表单域使用Hooks - useState，并在输入内容时使用onChange方法。

const [data,setData]=useState([])

更新：

您还可以尝试：

禁用: this.props.ProductsList.length >0？false:true