Question

我正在做一个反应表，我想在我点击它时更改编辑按钮以保存。我试过下面的代码，我知道这不是正确的方法。谁能告诉我什么是正确的方法？

这是渲染中的编辑按钮。单击时调用编辑功能。 dataProp包含我从文件导入的json数据。

 {this.state.dataProp.map((data, index) => {
      return (
        <div className="show-grid row category-row">
          <div className="col-md-8 text-left category" key={data.brandId}>
           <b>{data.categoryName}</b></div>
          <div className="col-md-4 text-right" >
          <button className="edit" ref="newText" onClick={() => 
            this.edit(index)}>{this.state.text}</button>
          </div>
          </div>
        </div>
        )
 })}

class DisplayTable extends Component {
constructor(props) {
super(props);
this.state = {
  text: "EDIT",
  newArray: [],
  dataProp: this.props.dataProp,
  productsEditList:[ ---->This is for toggling individual button 
    {
      id: 0,
      isEdit: false
    },
    {
      id: 1,
      isEdit: false
    },
    {
      id: 2,
      isEdit: false
    }
  ]
}
this.edit = this.edit.bind(this);
this.save = this.save.bind(this);
}
edit(key) {
  this.state.productsEditList.map(keyy => {
  if (key == keyy.id) {
    keyy.isEdit:true
   }
  this.save(key);
 })
}
save(key) {
  if (!this.state.editing.key) {
   this.setState({
   text: 'SAVE',
   editing: false
   })
  }
 }

当我点击其中任何一个时，此代码会导致所有按钮更改为保存。我不明白我应该如何切换单个按钮。 all buttons changes to save when I click on anyone of them

Answer 1

我将按钮的文本处于状态，并在单击按钮时将其切换。这是按钮的代码 -

 <button className={this.state.text === "EDIT" ? "edit" : "save"} onClick={() =>this.edit}>{this.state.text}
 </button>

以下是切换按钮的代码

 edit() {
    if (this.state.editing === false) {
        this.setState({
            text: 'SAVE',
            editing: true
        });
    }
    else {
        this.setState({
            text: 'EDIT',
            editing: false
        });
        if (this.state.changedSkus.length > 0) {
            this.props.edit_menu_items_api({ "changedSkus": this.state.changedSkus });
        }
    }
    this.render();
}

切换按钮onclick in react

1 个答案: