Question

所以我是React.js的新手，并且一直坚持写一个功能。我有一个表单，我试图添加一组数据的数值和＆amp;一个网址。用户单击添加按钮后，将在表单中动态生成一行并显示值，并选择编辑或删除所述值。用户可以根据需要添加任意数量的行。

生成这些动态行的代码位于

之下

＆＃13;

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

＆＃13;

另外，我在构造函数

中绑定了如下函数

＆＃13;

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

＆＃13;

所述功能定义如下

＆＃13;

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

＆＃13;

问题是上述三个功能都没有点击teh按钮。此外，在firefox控制台中，我看不到任何与onclick相关的错误。

请帮忙。

Answer 1

首先，你应该避免做DOM操作并让反应照顾它。正如您在评论中建议的那样，您应该使用JSX。有关详细信息：JSX

您可以创建要动态呈现的无状态组件，并让父组件处理状态更改。   以下样本仅供参考。

＆＃13;

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"));

＆＃13;

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

＆＃13;

Answer 2

如果您使用的是redux，请查看redux-form＆＃39; s fieldArray。我认为该示例提供了与您正在寻找的功能类似的功能。

Redux Form - Field Arrays Example

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

2 个答案: