如何在反应中将文本更改为输入字段onclick？

Question

我想在单击编辑按钮时将 Text 字段更改为 input 字段。文本在 map 函数中，下面提到了我工作的代码

function test() {
  const [img, setImg] = useState(false)

  let data = {
    {  
      id: 1,
      name: 'test 1'
    },
    {
      id: 2,
      name: 'test 2'
    }
  }

return (
  <>
    {data.map(e => {
      return (
        {img ? (
          <input placeholder={e.name} />
        ) : (
          <div>
            <p>{e.name}</p>
            <button onClick={() => setImg(true)}>edit</button>
          </div>
        )}
      )
    })}
  </>
)

在此代码中，如果我单击编辑按钮，它实际上会显示所有名称的输入，而不是我单击的名称。我只想编辑一个名字，例如，如果我想编辑名字 test 1，我不希望输入显示在 test 2

Answer 1

您可以在点击编辑按钮时设置一个状态，然后使用这个状态有条件地显示您想要的输入：

function test() {
  const [img, setImg] = useState(false)
  const [idEdit, setIdEdit] = useState(null); //<== Create this state

  let data = {
    {  
      id: 1,
      name: 'test 1'
    },
    {
      id: 2,
      name: 'test 2'
    }
  }

return (
  <>
    {data.map(e => {
      return (
        {img ? (
          <input placeholder={e.name} style={{display: idEdit == e.id ? 'block' : 'none'}}/> //<== Conditionaly to appear or not
        ) : (
          <div>
            <p>{e.name}</p>
            <button onClick={() => {
               setImg(true)
               setIdEdit(e.id) //<== set idEdit state here
              } 
             }>edit</button>
          </div>
        )}
      )
    })}
  </>
)

Answer 2

像这样的东西会起作用-

function test() {
  const [img, setImg] = useState(-1)

  let data = {
    {  
      id: 1,
      name: 'test 1'
    },
    {
      id: 2,
      name: 'test 2'
    }
  }

return (
  <>
    {data.map((e, idx) => {
      return (
        {img==idx ? (
          <input placeholder={e.name} style={{display: idEdit == e.id ? 'block' : 'none'}}/> //<== Conditionaly to appear or not
        ) : (
          <div>
            <p>{e.name}</p>
            <button onClick={() => {
               setImg(idx)
              } 
             }>edit</button>
          </div>
        )}
      )
    })}
  </>
)

如何在反应中将文本更改为输入字段onclick？

how to change text to input field onclick in react?

javascript

reactjs