Question

下面是我的部分代码，但我的问题非常简单，当用户点击li时，如何在我的函数中输入data-id =“1”？

render(){
    return(
      <ul id="todo">
      {this.state.items.map((item,i) => 
        <li className='list-group-item' key={i} data-id={item.id}>{item.name}
        <button onClick={//how to pass item.id to my function?}>X</button>
        </li>
      )}
      </ul>
    ) 
  }

Answer 1

由于您已经在使用ES6 - 在这里使用arrow功能可能会更清晰一些：

render(){
    return(
      <ul id="todo">
      {this.state.items.map((item,i) => 
        <li className='list-group-item' key={i} data-id={item.id}>{item.name}
        <button onClick={() => this.yourfunc(item.id)}>X</button>
        </li>
      )}
      </ul>
    ) 
}

Answer 2

您可以使用bind()执行此操作。

render(){
    return(
      <ul id="todo">
      {this.state.items.map((item,i) => 
        <li className='list-group-item' key={i} data-id={item.id}>{item.name}
        <button onClick={yourfunc.bind(this, item.id)}>X</button>
        </li>
      )}
      </ul>
    ) 
  }

您的函数将收到item.id作为第一个参数

Answer 3

您可以按照以下方式执行此操作：

class Test extends React.Component {
    constructor(props){
         super(props);
         this.state = {
            items: [
                {item: "item", id: 1},
                {item1: "item1", id: 2}
            ]
         }
    }

    handleClick(id, e){
        alert(id);
    }

    render(){
        return(
           <ul id="todo">
               {this.state.items.map((item,i) => 
                    <li className='list-group-item' key={i} data-id={item.id}>{item.name}
                         <button onClick={this.handleClick.bind(this, item.id)}>X</button>
                    </li>
               )}
           </ul>
        ) 
   }
}

React.render(<Test />, document.getElementById('container'));

这是jsfiddle。

Answer 4

在我看来，你不应该声明函数，也不应该在 render 方法中绑定方法。这些都不是：

onClick={(e) => this.handleClick(e, item.id)}

onClick={this.handleClick.bind(this, item.id)}

我知道有很多显示语法的tutoriales。但也有相当多的博客帖子警告为什么这不是一个好主意。基本上，您在每个渲染上创建一个新函数。

去检查手册： https://reactjs.org/docs/handling-events.html

我知道在最后两个例子中它确实在渲染上创建了函数。但反应手册也显示了这个例子并说：

class LoggingButton extends React.Component {
  handleClick() {
    console.log('this is:', this);
  }

  render() {
    // This syntax ensures `this` is bound within handleClick
    return (
      <button onClick={(e) => this.handleClick(e)}>
        Click me
      </button>
    );
  }
}

此语法的问题是创建了不同的回调每次LoggingButton渲染。在大多数情况下，这很好。但是，如果将此回调作为prop传递给较低的组件，这些组件可能会进行额外的重新渲染。我们一般建议在构造函数中使用绑定或使用类字段语法，避免这种性能问题。

更好的解决方案

因此，如果您只需传递一个值，请查看手册中的其他示例。基本上你可以绑定构造函数中的方法（或使用实验语法来避免这一步骤）。

constructor(props) {
  super(props);
  this.handleClick = this.handleClick.bind(this);
}

您将如何获得您想要获得的 id / value ？见这个例子：

class App extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick({currentTarget}) {    
    console.log(currentTarget.value) // e.currentTarget.value would be equivalent
  }

  render() {
    return (
      <button value="here!" onClick={this.handleClick}>   
        Click me
      </button>
    );
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

body {
  padding: 5px;
  background-color: white;
}

<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>

<div id="root"></div>

因此，如果您使用按钮或任何表单元素（接受值），您可以明确地考虑这种语法。

Answer 5

以下是正在运行的样本;

＆＃13;

class App extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        items: [{
          id: 0,
          name: "Buy milk"
        }, {
          id: 1,
          name: "Write unit tests"
        }, {
          id: 2,
          name: "Cook a meal"
        }]
      }
      this.handleClick = this.handleClick.bind(this);
    }

    handleClick(value) {
      console.log(`${value} clicked`);
    }

    renderTodos() {
      return this.state.items.map((item, idx) => {
        return ( < li className = 'list-group-item'
          key = {
            idx
          } > {
            item.name
          } < button onClick = {
            () => this.handleClick(item.id)
          } > X < /button>
        </li >
        )
      })
    }
    render() {
        return ( < ul id = "todo" > {
            this.renderTodos()
          } < /ul>
    ) 
  }
}

ReactDOM.render(
  <App/ > ,
          document.getElementById('react_example')
        );

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <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>
  <meta charset="utf-8">
</head>

<body>
  <div id="react_example"></div>
</body>

</html>

＆＃13;

Answer 6

Mayid是正确的，如果函数作为道具传递给其他组件，那么在render方法中声明或绑定函数是不对的。

不幸的是，currentTarget对我不起作用。

我使用了event.target的getAttribute函数。这不会导致不必要的重新渲染。

class App extends React.Component {
  handleClick = (event) => {    
    console.log(event.target.getAttribute('index'))
  }

  render() {
    return (
      <button index="1" onClick={this.handleClick}>   
        Click me
      </button>
    );
  }
}

通过点击react.js传递id

6 个答案: