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

Question

所以我是 React.js 的新手，并且一直致力于编写函数。我有一个表单，我试图在其中添加一组数据、数值和网址。用户单击添加按钮后，表单中会动态生成一行，其中显示值以及编辑或删除所述值的选项。用户可以根据需要添加任意数量的行。

生成这些动态行的代码如下

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>';

另外，我在构造函数中按如下方式绑定(bind)函数

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

该函数定义如下

editOrderStandard(){
  alert("Edit");
}

deleteOrderStandard(){
  alert("Delete");
}

saveOrderStandard(){
  alert("Save");
}

问题是，单击按钮时，上述三个功能都不会触发。此外，在 Firefox 控制台中我看不到任何与 onclick 相关的错误。

请帮忙。

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>