javascript - 如何在 React 中通过单击动态添加的按钮触发功能？

Question

我有一个带有一个组件的 React 应用程序，该组件具有一个添加动态按钮列表的按钮。每个动态按钮都有 onClick 方法来触发一个带有 id 参数的函数 (sendOption)。问题是，单击添加的按钮后，“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;

标签： javascriptreactjs

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>