Question

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

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

是否可以通过event.target事件的onClick属性来执行此操作？

还是应该在创建时为每个div创建一个引用，然后再使用引用？

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

Answer 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>
   );
 };
}

Answer 2

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

您可以通过使用引用来做到这一点，但是通常除非绝对必要，否则您要避免使用引用，因为在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>

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

2 个答案: