在 React 中使用 onClick 更改元素内容

Posted 2023-02-25

【中文标题】在 React 中使用 onClick 更改元素内容

【英文标题】：Change element content with onClick in React

【发布时间】：2018-11-15 18:02:50

【问题描述】：

在我的应用程序中，我动态生成了多个块，每个块都有一个 onClick 事件。

我的目标是能够在点击发生时更改 div 的内容。

有没有办法通过onClick 事件的event.target 属性来做到这一点？

或者我应该在创建时为每个 div 创建一个 ref，然后使用 refs？

或者我应该在组件状态下创建一个 Div 元素数组，然后搜索和修改元素，然后重新渲染数组中的所有 div？

【问题讨论】：

它主要是基于意见的，但是响应点击事件而改变状态并让组件以新状态重新呈现自己是最常见的方法，就像你在上一篇中概述的那样问题。

【参考方案1】：

由于块是动态生成的，因此在子组件上设置 onClick 事件。

const Parent = () => 
  return (
    <Child content=content contentAfterClick=content />
    <Child content=content contentAfterClick=content />
  )



class Child extends Component 
  constructor() 
    super();
    this.state =
      read: false,
    ;
  

 render() 

   if (this.state.read) 
     return(
       <div>this.props.contentAfterClick</div>
     )
   

   return (
     <div onClick=() => this.setState( read: true )>
       <div>this.props.content</div>
     </div>
   );
 ;

【参考方案2】：

此演示说明了如何在通过 onClick 和 event.target 对象发生点击时根据需要更改 div 的内容、文本。

您可以通过使用 refs 来做到这一点，但通常您希望避免使用 refs，除非绝对必要，因为在 React 中有更简单的方法可以完成同样的事情。

也不希望保持物理 DOM 节点 htmlDivElement 处于状态。相反，将它依赖的内容保持在状态（在我们的例子中是单个数值），然后当您更改内容时，它会自动更新并重新渲染我们的 div 节点。

// Example class component
class Container extends React.Component 
  constructor(props) 
    super(props);
    const blocks = [];
    blocks.push(0);
    blocks.push(0);
    blocks.push(0);
    this.state =  blocks: blocks, clickedElementContents: "" ;
  
 
  increment(event, index) 
    const newBlocks = this.state.blocks;
    newBlocks[index]++;
    this.setState( blocks: newBlocks, clickedElementContents: event.target.innerText );
  
 
  render() 
    return (
      <div>
        <div className="block" onClick=(event) =>  this.increment(event, 0) >Click me! (this.state.blocks[0])</div>
        <div className="block" onClick=(event) =>  this.increment(event, 1) >Click me! (this.state.blocks[1])</div>
        <div className="block" onClick=(event) =>  this.increment(event, 2) >Click me! (this.state.blocks[2])</div>
        <span>Contents of the clicked element: this.state.clickedElementContents</span>
      </div>
    );
  


// Render it
ReactDOM.render(
  <Container/>,
  document.body
);

.block 
  display: inline-block;
  background-color: black;
  color: white;
  padding: 5px;
  margin-right: 10px;

<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>