react 点击获取元素里的值

在 React 中，可以通过 `ref` 属性获取到元素的值。

首先，在组件中定义一个 `ref`：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
  }

  handleClick = () => {
    console.log(this.inputRef.current.value);
  }

  render() {
    return (
      <div>
        <input type="text" ref={this.inputRef} />
        <button onClick={this.handleClick}>Get Value</button>
      </div>
    );
  }
}

然后，在 `handleClick` 方法中，使用 `ref.current.value` 获取输入框的值。

注意，这里使用了 `React.createRef()` 创建了一个 `ref`，并将其赋值给 `inputRef` 属性。在渲染组件时，将 `ref={this.inputRef}` 属性添加到 `input` 元素上，以便将 `ref` 与元素关联起来。

相关问题

react 点击获取id

### 回答1：
当用户点击 React 组件时，可以通过事件对象获取该组件的 ID。具体实现方式如下：

1. 在组件的 render 方法中，为组件添加一个 onClick 事件处理函数，如下所示：

render() {
  return (
    <div onClick={this.handleClick}>点击我获取 ID</div>
  );
}

2. 在事件处理函数 handleClick 中，通过事件对象 e 获取当前组件的 ID，如下所示：

handleClick(e) {
  const id = e.target.id;
  console.log(`当前组件的 ID 是：${id}`);
}

这样，当用户点击该组件时，控制台会输出当前组件的 ID。

### 回答2：
React 是一个用于构建用户界面的 JavaScript 库。在 React 中，我们可以通过使用事件处理函数来实现点击获取 id 的功能。

首先，在 React 组件中，我们需要定义一个状态（state）来存储 id 的值。可以使用 useState() 钩子来创建这个状态变量，代码如下：

import React, { useState } from 'react';

function MyComponent() {
  const [id, setId] = useState('');

  const handleClick = (event) => {
    const { id } = event.target;
    setId(id);
  }

  return (
    <div>
      <button id="button-1" onClick={handleClick}>按钮1</button>
      <button id="button-2" onClick={handleClick}>按钮2</button>
      <button id="button-3" onClick={handleClick}>按钮3</button>
      <p>点击的按钮 id 是：{id}</p>
    </div>
  );
}

export default MyComponent;

在上述代码中，我们定义了一个状态变量 id，并使用 useState() 初始化为空字符串。然后，我们定义了一个 handleClick() 函数，该函数接收一个事件对象作为参数。通过事件对象的 target 属性，可以获取到被点击的按钮元素，进而获取到该按钮的 id。最后，使用 setId() 方法将获取到的 id 值更新到状态变量 id 中。

在组件的 JSX 中，我们创建了三个按钮，并将 handleClick 函数传递给每个按钮的 onClick 属性。当用户点击某个按钮时，React 会自动调用 handleClick 函数，并传入一个事件对象。

最后，我们在一个段落（p）元素中展示了当前点击的按钮 id，通过插值{id}来显示状态变量 id 的值。

这样，当用户点击按钮时，React 会调用 handleClick 函数，将按钮的 id 传递给该函数，并更新组件的状态，从而实现了点击获取 id 的功能。

### 回答3：
在React中获取点击的元素的id可以通过事件对象的target属性来实现。首先，在组件的render()方法中给需要绑定事件的元素添加一个onClick属性，将其绑定到一个处理点击事件的函数上，如下所示：

class MyComponent extends React.Component {
  handleClick = (event) => {
    const id = event.target.id;
    console.log('点击的元素id为：', id);
  }

  render() {
    return (
      <div>
        <button id="button1" onClick={this.handleClick}>按钮1</button>
        <button id="button2" onClick={this.handleClick}>按钮2</button>
        <button id="button3" onClick={this.handleClick}>按钮3</button>
      </div>
    );
  }
}

在上述代码中，我们给按钮元素添加了一个id属性来标识不同的按钮，同时将点击事件处理函数handleClick绑定到每个按钮的onClick属性上。

当用户点击某个按钮时，React会调用handleClick函数，并将一个event对象传入该函数。我们可以通过event.target获取到触发点击事件的元素，进而通过target.id获取到其id属性的值。

例如，当用户点击"按钮2"时，控制台会打印出"点击的元素id为：button2"。

需要注意的是，如果在点击事件的处理函数中需要使用组件的状态或方法，需要将处理函数声明为实例方法（使用箭头函数），或者在构造函数中使用bind()方法绑定this。

React 点击删除列表中对应项（React 获取DOM中自定义属性）

要实现点击删除列表中对应项的功能，可以首先在列表项中添加一个自定义属性，用于标识该项的唯一性。例如，可以给每个列表项添加一个id属性：

<ul>
  {list.map(item => (
    <li key={item.id} data-id={item.id} onClick={handleDelete}>
      {item.title}
    </li>
  ))}
</ul>

在点击事件中，可以通过event.target获取到被点击的元素，从而获取到该元素的自定义属性值。代码示例如下：

function handleDelete(event) {
  const id = event.target.getAttribute('data-id');
  // 根据id删除对应的列表项
}

然后，根据获取到的id值，可以执行删除操作。具体实现方式根据具体情况而定，可以使用React的状态管理工具（如useState、useReducer等）来管理列表数据，并在删除时更新状态。