[英]How to fire a function on clicking by a dynamically added button in React?
我有一個帶有一個組件的 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;
問題在於點擊事件綁定:
改變這個:
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>
嘗試這個:
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
這是每個 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]
@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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.