如何在 React 中单击动态添加的按钮时触发 function？

Question

我有一个带有一个组件的 React 应用程序，该组件具有一个添加动态按钮列表的按钮。 每个动态按钮都有 onClick 方法来触发带有 id 参数的 function (sendOption)。 问题是，单击添加的按钮后，function“sendOption”没有触发。

我也改变了这个：

<button onClick={this.sendOption(buttonId)}>

对此：

<button onClick={() => this.sendOption(buttonId)}>

但是，onClick 仍然无法正常工作。 我该如何解决这个问题？

零件：

let buttonId = 0;

Class ButtonCreation extends Component {
    constructor(props) {
        super(props);
        this.state = {
            buttonsList: [],
        }
    }

    addButton = () => {
        buttonId += 1;

        this.setState({ 
             buttonsList: [...this.state.buttonsList, <button onClick={this.sendOption(buttonId)}>Send Option</button>]
        })
    }

    sendOption = (buttonId) => {
       console.log(buttonId)
    }

    render() {
       return(
          <div>
            <button onClick={this.addButton}>Add new Button</button>
            {this.state.buttonsList}
          </div>
       );
    }
}

export default ButtonCreation;

Answer 1

问题在于点击事件绑定：

改变这个：

onClick={this.sendOption(buttonId)}

至：

onClick={() => this.sendOption(buttonId)}

笔记：

单击按钮时，它不会使用该按钮打印正确的 id，但始终打印最后一个buttonId ，我也解决了该问题。您的代码的另一个问题是当用户单击任何按钮时，使用以下命令：

<button value={buttonId} onClick={(e) => this.sendOption(e.target.value)}>Send Option</button>

---

您可以运行代码片段并检查：

 let buttonId = 0; class App extends React.Component { constructor(props) { super(props); this.state = { buttonsList: [] } } addButton = () => { buttonId += 1; this.setState({ buttonsList: [...this.state.buttonsList, <button value={buttonId} onClick={(e) => this.sendOption(e.target.value)}>Send Option</button>] }) } sendOption = (buttonId) => { console.log(buttonId) } render() { return( <div> <button onClick={this.addButton}>Add Button </button> <br/><br/> {this.state.buttonsList} </div> ); } } ReactDOM.render(<App />, document.getElementById('react-root'));

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

Answer 2

尝试这个：

import React from "react";
import "./styles.css";

let buttonId = 0;
export default class App extends React.Component {
  constructor(props) {
  super(props);
  this.state = {
    buttonsList: []
  };
 }

addButton = () => {
   buttonId += 1;

  this.setState({
    buttonsList: [
      ...this.state.buttonsList,
      <button id={buttonId} onClick={(e) => this.sendOption(e)}>Send Option</button>
    ]
  });
};

sendOption = e => {
  console.log(e.target.id);
};

render() {
      return (
      <div>
        <button onClick={this.addButton}>Add new Button</button>
        {this.state.buttonsList}
      </div>
    );
  }
}

代码笔： https://codesandbox.io/s/clever-flower-7fm05?file=/src/App.js

Answer 3

这是每个 id 的每个按钮的示例：

使用target.id通过单击获取每个按钮 ID 使用键来避免 DOM 键问题

let buttonId = 0;
export default function App() {
  const [buttonsList, setbuttonsList] = useState([]);

  const addButton = () => {
    buttonId += 1;

    setbuttonsList(prevState => [
      ...prevState,
      <button
        key={buttonId}
        id={buttonId}
        onClick={event => sendOption(event, event.target.id)}
      >
        Send Option
      </button>
    ]);
  };

  const sendOption = (event, id) => {
    console.log(id);
  };

  return (
    <div>
      <button onClick={addButton}>Add new Button</button>
      {buttonsList}
    </div>
  );
}

代码 [ https://codesandbox.io/s/vigorous-firefly-c7nrc?fontsize=14&hidenavigation=1&theme=dark]

Answer 4

@Vivek 几乎解决了您的问题。

但是我想在您的代码中向您建议几点。 通过查看以下代码片段，您将获得更好的主意：

 class App extends React.Component { constructor(props) { super(props); this.state = { buttonsList: [], btnCounter: 0, } } addButton = () => { // you can pass name, value for new button based on some value // you can also generate new id every time: const id = new Date().getTime(); // use functional setState whenever update previous state this.setState((prevState) => ({ btnCounter: prevState.btnCounter + 1, buttonsList: [...prevState.buttonsList, { id: prevState.btnCounter + 1, name: `Name${prevState.btnCounter + 1}`, value: `Send Option` }] })); // if possible add properties of button instead of directly adding element into state } sendOption = (buttonId) => { console.log(buttonId) } render() { const { buttonsList } = this.state; return ( <div> <button onClick={this.addButton}>Add new Button</button> {buttonsList && buttonsList.length > 0 && buttonsList.map((btn, i) => ( <div key={btn.id}> <button name={btn.name} onClick={() => this.sendOption(btn.id)} > {btn.value} </button> </div> ))} </div> ); } } ReactDOM.render(<App />, document.getElementById('root'));

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