react中前后台传递数据时如何传递字符串

Posted 2023-03-24

参考技术A 使用React元素处理事件与处理DOM元素上的事件非常相似。不过有一些语法上的差异：
react事件使用驼峰命名法，而不是全部小写命名。
使用JSX你传递一个函数作为事件处理程序，而不是一个字符串。
例如，html：
<button onclick="activeLasers()">
Active Lasers
</button>

在React中略有不同：
<button onClick=activateLasers>
Active Lasers
</button>

另一个区别是，你不能返回false来防止React中的默认行为。 您必须显式调用preventDefault。 例如，使用纯HTML，为了防止打开新页面的默认链接行为，您可以写：
<a href="#" onclick="console.log('The link was clicked'); return false;">
Click me
</a>

在React中，这可以改为：
function ActiveLink()
function handleClick(e)
e.preventDefault();
console.log('The link was clicked');


return (
<a href='#' onClick=handleClick>
click me
</a>
);

React.js - 如何使用 axios POST 方法将数据从 div 传递到函数？

【中文标题】React.js - 如何使用 axios POST 方法将数据从 div 传递到函数？

【英文标题】：React.js - How do I pass data from a div to a function with axios POST method?

【发布时间】：2022-01-14 11:57:32

【问题描述】：

我想将字符串从映射元素传递到一个函数，该函数应该在单击所述元素时触发，然后执行发布请求。这是函数：

const update = () => 
    axios.
      post("http://localhost:4000/api/albums/favorites", "???")
      .then(res => 
        console.log(res);
      )
  

这是我的映射数据所在的位置：

return(
    <Container className="d-flex flex-column py-2" style= height: "100vh" >
      <Form.Control
        type="search"
        placeholder="Search Songs/Artists"
        value=search
        onChange=e => setSearch(e.target.value)
      />
      <div className="flex-grow-1 my-100" style= overflowY: "auto" >
        <div className="d-flex m-2 align-items-center card-body">  
          searchResult.map(result => (
            <div style= cursor: "pointer"  onClick=update> 
              <img key=result.imageUrl src=result.imageUrl />
              result.artistName - result.albumName
            </div>
          ))
        </div>
      </div>
    </Container>
  );

这是我通过 api 从搜索栏的结果中获得的数据。我应该如何引用数据来代替???在更新功能？我试图寻找答案，但我可能不知道如何很好地表达我的问题。

【参考方案1】：

您可以像这样将每个结果传递给您的 update 函数

<div style= cursor: "pointer"  onClick=() => update(result)> 
...

并使您的更新函数接受您将在 axios 请求中使用的参数

const update = (data) => 
    axios.
      post("http://localhost:4000/api/albums/favorites", data)
      .then(res => 
        console.log(res);
      )

现在每个结果 div 在点击时都会触发更新功能，但会绑定到它的数据

【讨论】：

@mehawelm11 如果完全回答了您的问题，请考虑将答案标记为已接受（下方的复选标记）。