React - HTML 输入不会禁用动态

Question

我在一个数组中有一个map，并且对于每个项目，我都会渲染一个具有 disabled 属性的组件，其中包含要检查的内容，但是在 input 标记中这不起作用，对于所有渲染的组件，只考虑第一个结果。例如：first_result = false 然后all_results = false。

const array = [1, 2, 3, 4, 5];

{array.map((item, index) => (
  <div>
    <input
      id="icon-button-file"
      accept="image/*"
      type="file"
      multiple="multiple"
      onChange={(e) => setState(e.target.files)}
      style={{ display: "none" }}
      disabled={index % 2 === 0}
    />
    <label htmlFor="icon-button-file">
      <IconButton
        color="primary"
        aria-label="upload picture"
        component="span"
        disabled={index % 2 === 0}
      >
        <PhotoCamera />
      </IconButton>
    </label>
  </div>
))}

Answer 1

嗯，我想通了。 disabled 属性工作正常，但由于某种原因，按钮的 onClick 事件没有触发输入属性中的 onClick 属性。

print of the display: none css property disabled

所以我修改了一点代码：

{array.map((item, index) => (
  <div>
    <input
      id={`icon-button-file-${index}`} 
      accept="image/*"
      type="file"
      multiple="multiple"
      onChange={(e) => setState(e.target.files)}
      style={{ display: "none" }}
      disabled={index % 2 === 0}
    />
    <label htmlFor="icon-button-file">
      <IconButton
        color="primary"
        aria-label="upload picture"
        component="span"
        disabled={index % 2 === 0}
        onClick={() => document.getElementById(`icon-button-file-${item.id}`).click()}
      >
        <PhotoCamera />
      </IconButton>
    </label>
  </div>
))}