javascript - 如何有条件地显示 React JSX 中的元素？

Question

我正在使用有条件地呈现input或textarea元素的 JSON 数据动态创建 UI。

示例 JSON 数据

[
  {
    type: "input",
    val: "input text",
    name: "Input Field",
    editable: false
  },
  {
    type: "text",
    val: "text area text",
    name: "Text area field",
    editable: true
  },
  {
    type: "text",
    val: "text area text",
    name: "Text area field",
    editable: true
  }
];

• 我有两个属性值，type一个是input另一个text，所以如果type属性有值“输入”，那么我将创建一个input元素，否则创建一个textarea元素。
• 我也有额外的属性。其中之一是editable，如果设置为 true，则用户可以单击Send稍后显示按钮的编辑按钮。

问题

• 当我单击编辑时，两个输入字段都变得可编辑并且都Edit变为Send

我尝试使用索引并与索引匹配，但这也不起作用。

我的代码

{data.map((li, index) => (
      <div className="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
        {li.type === "input" && (
          <div className="divCont">
            {li.editable && disabled && (
              <span onClick={editComp}>Edit</span>
            )}
            <input
              type="text"
              className="form-control"
              disabled={disabled}
              defaultValue={li.val}
            />
          </div>
        )}

        {li.type === "text" && (
          <div className="divCont">
            {li.editable && disabled && (
              <span onClick={(e) => editComp(index)}>Edit</span>
            )}
            {disabled === false && ind === index && (
              <span onClick={editComp}>Send</span>
            )}
            <input
              type="text"
              className="form-control"
              disabled={disabled}
              defaultValue={li.val}
            />
          </div>
        )}
      </div>
    ))}

代码沙箱

编辑/更新

我想要做什么

• 当对象具有属性editable:true时，它会在 input 或 textarea 元素上方显示编辑按钮。
• 然后，当我单击编辑时，我想确保启用特定的输入或文本区域元素，以便用户可以键入。Edit按钮应更改为Send按钮以发送数据。

标签： javascriptreactjsreact-hooks

Answer 1

您正在使用相同的标志“禁用”来控制所有组件的状态。因此，当您单击发送时，您将每个字段都更改为 false，这会使它们全部可编辑。最简单的解决方法是为每个字段使用不同的标志，但如果需要，它可能无法很好地扩展。