动态生成的按钮上的React.js Onclick事件未触发

Question

So I am new to React.js and have gotten stuck on writing a fucntionality. I have a form in which i am trying to add a set of data a numerical value & a web address. Once a user clicks the add button, a row is dynamically generated within the form with the values displayed and option to either edit or delete the said value. The user can add as many of these rows as they want.

The code to generate these dynamic rows is below

 let orderStandardDetails = '<div id={standardInfo_'+orderStandardInformationChildNodesLength+'} class="standardInfo"><br /><input id="orderStandard_'+orderStandardInformationChildNodesLength+'" class="orderStandardInfo" type="text" value="ISO '+orderStandard.toString()+'" name="standardInfo" disabled/>' + '<input id={orderStandardUrl_'+orderStandardInformationChildNodesLength+'} type="text" class="orderStandardUrlInfo" value="'+orderStandardUrl+'" disabled/>' + '<button class="orderStandardEdit" id={orderStandardEdit_'+orderStandardInformationChildNodesLength+'} onClick={this.editOrderStandard}><img src="app/images/Edit.svg" /></button>' + '<button class="orderStandardDelete" id={orderStandardDelete_'+orderStandardInformationChildNodesLength+'} onClick={this.deleteOrderStandard()}><img src="app/images/Delete.svg" /></button>' + '<button class="orderStandardSave" id={orderStandardSave_'+orderStandardInformationChildNodesLength+'} onClick={this.saveOrderStandard()}><img src="app/images/Save.svg" /></button></div>'; 

Also, I am binding the function as follows inside the constructor

 this.editOrderStandard = this.editOrderStandard.bind(this); this.deleteOrderStandard = this.deleteOrderStandard.bind(this); this.saveOrderStandard = this.saveOrderStandard.bind(this); 

The said function is defined as follows

 editOrderStandard(){ alert("Edit"); } deleteOrderStandard(){ alert("Delete"); } saveOrderStandard(){ alert("Save"); } 

The issue is that none of the above three functions are firing on clicking teh button. Moreover, in the firefox console i cannot see any errors pertaining to onclick.

Please help.

Answer 1

First things first, you should avoid to do DOM manipulations and let react take care of it. As suggested to you in comments, you should use JSX. For more info: JSX

You can create stateless components which you want to dynamically render and let the parent component take care of state changes. Below sample is for reference.

 const OrderStandardDetails =(props) => { return ( <div class = "standardInfo"> <input class = "orderStandardInfo" type = "text" value = "ISO" name = "standardInfo" disabled / > <input type = "text" class = "orderStandardUrlInfo" value = "" disabled / > <button class = "orderStandardEdit" onClick = {props.onEdit}>Edit</button> </div> ); }; class App extends React.Component { constructor(props) { super(props); this.onEdit = this.onEdit.bind(this) } onEdit() { alert("Edit"); } render() { return <div> <OrderStandardDetails onEdit={this.onEdit} /> </div> }; } ReactDOM.render( < App / > , document.getElementById("app")); 

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

Answer 2

If you're using redux, check out redux-form 's fieldArray . I think the example provides functionality similar to what you are looking for.

Redux Form - Field Arrays Example