在按钮中访问 JSX 反应变量

Question

我已将来自后端 mongodb 的响应列表映射到前端。对于每个回复，我还添加了一个按钮。我想为我的投票按钮添加一个 voteResponse 函数。我怎样才能继续在我的 voteResponse 函数中访问我的 {response.respondee} 和 {response.response}？

{responses.map((response) => (
                <div
                  key={response._id}
                  className='py-8 px-12 mb-12 bg-gray-50 border-b border-gray-100 transform transition duration-300 ease-in-out hover:-translate-y-2'
                >
                  <NextLink href={`/responses/${response.response}`} passHref>
                    <div>
                      <div className='inline-block text-gray-900 mb-4'></div>
                      <h3 className='text-lg leading-normal mb-2 font-semibold text-black'>
                        {response.response}
                      </h3>
                      <p className='text-gray-500'>
                        {response.respondee.slice(0, 5)}...
                        {response.respondee.slice(38)}
                      </p>
                    </div>
                  </NextLink>
                  <div>
                    <button
                      type='submit'
                      className='inline-flex justify-center mt-3 py-1 px-3 border border-transparent shadow text-base font-medium rounded-md text-white bg-cyan-600 hover:bg-cyan-700 focus:outline-none'
                      onClick={voteResponse}
                    >
                      Vote
                    </button>
                  </div>
                </div>
              ))}

Answer 1

您可以通过两种方式完成此操作。首先是制作一个单独的组件，该组件在 map 函数中呈现并通过道具在其中传递响应，然后每个组件都可以访问它的 response.response 和 response.respondee.

funtion Response({response}){
const voteResponse = () =>{
  console.log(response.response, response.respondee)
}
return(
     <div key={response._id} className='py-8 px-12 mb-12 bg-gray-50 border-b border-gray-100 transform transition duration-300 ease-in-out hover:-translate-y-2'>
  <NextLink href={`/responses/${response.response}`} passHref>
    <div>
      <div className='inline-block text-gray-900 mb-4'></div>
      <h3 className='text-lg leading-normal mb-2 font-semibold text-black'>
        {response.response}
      </h3>
      <p className='text-gray-500'>
        {response.respondee.slice(0, 5)}... {response.respondee.slice(38)}
      </p>
    </div>
  </NextLink>
  <div>
    <button type='submit' className='inline-flex justify-center mt-3 py-1 px-3 border border-transparent shadow text-base font-medium rounded-md text-white bg-cyan-600 hover:bg-cyan-700 focus:outline-none' onClick={voteResponse}>
                      Vote
                    </button>
  </div>
</div>
  )
}

//use it like this 
{responses.map((response) => (
  <Response response={response} key={response._id} />
))}

pass the index in voteResponse function 的第二种方法，然后通过该索引，您可以访问那些变量，例如 responses[index].response 和 responses[index].respondee。

{responses.map((response, index) => (
<div key={response._id} className='py-8 px-12 mb-12 bg-gray-50 border-b border-gray-100 transform transition duration-300 ease-in-out hover:-translate-y-2'>
  <NextLink href={`/responses/${response.response}`} passHref>
    <div>
      <div className='inline-block text-gray-900 mb-4'></div>
      <h3 className='text-lg leading-normal mb-2 font-semibold text-black'>
        {response.response}
      </h3>
      <p className='text-gray-500'>
        {response.respondee.slice(0, 5)}... {response.respondee.slice(38)}
      </p>
    </div>
  </NextLink>
  <div>
    <button type='submit' className='inline-flex justify-center mt-3 py-1 px-3 border border-transparent shadow text-base font-medium rounded-md text-white bg-cyan-600 hover:bg-cyan-700 focus:outline-none' onClick={voteResponse}>
          Vote
     </button>
  </div>
</div>
))}

Answer 2

将值传递给 onClick 属性：onClick={() => voteResponse(response)} 并将其用作 voteResponse 函数的 parameter：

const voteResponse = (res) => {
 console.log("response.respondee is: ", res.respondee) //<=== response.respondee value is res.respondee value
 console.log("response.response is: ", res.response)
}

{responses.map((response) => (
                <div
                  key={response._id}
                  className='py-8 px-12 mb-12 bg-gray-50 border-b border-gray-100 transform transition duration-300 ease-in-out hover:-translate-y-2'
                >
                  <NextLink href={`/responses/${response.response}`} passHref>
                    <div>
                      <div className='inline-block text-gray-900 mb-4'></div>
                      <h3 className='text-lg leading-normal mb-2 font-semibold text-black'>
                        {response.response}
                      </h3>
                      <p className='text-gray-500'>
                        {response.respondee.slice(0, 5)}...
                        {response.respondee.slice(38)}
                      </p>
                    </div>
                  </NextLink>
                  <div>
                    <button
                      type='submit'
                      className='inline-flex justify-center mt-3 py-1 px-3 border border-transparent shadow text-base font-medium rounded-md text-white bg-cyan-600 hover:bg-cyan-700 focus:outline-none'
                      onClick={() => voteResponse(response)
                    >
                      Vote
                    </button>
                  </div>
                </div>
              ))}

在按钮中访问 JSX 反应变量

Access JSX react variables in a button

reactjs