Question

我正在做一个Todo应用来练习React。我遇到了障碍，现在我想弄清楚如何唯一地编辑卡片。

当前，当我单击“编辑”时，我所有的卡都设置为isEditing == true。我尝试添加密钥和索引，但是似乎不能唯一地标识所选的卡。

如我的gif所示：

显然，预期的结果是只应将isEditing == true设置为所选卡。

请参见下面的代码。

更多信息： 有状态组件将道具传递给该组件，我正在使用react-bootstrap（因此，Panel，{{1} }），为了简洁起见，我删除了一些代码（Button等）。

construct

Answer 1

所有三个项都根据您的单个isEditing状态而变化，这就是为什么当您单击任何“编辑”按钮时看到所有三个项都显示出来的原因。代替使用单个isEditing的状态键，而是使用数组来维护所有三个状态，如下所示：

constructor(props) {

  super(props);

  // Sets a true/false editing state for all three panels
  this.state = {
    editingPanels: Array(3).fill(false)
  }
}

edit(i) {

    // Switches editing state to false/true for given i
    const editingPanels = this.state.editingPanels.slice();
    editingPanels[i] = !editingPanels[i];

    this.setState({
        editingPanels: editingPanels
    })
}

renderEditDoneButtons(i) {
    return (
        <div>
            <Button onClick={()=>this.state.edit(i)}>edit</Button>
        </div>
    )
}

renderNote(note) {
    return (
        <p> {note} </p>
    )
}

renderCard(note, i) {
    return (
        <Panel key={i}
               index={i}>
            {
                this.state.editingPanels[i] ? 
                this.renderForm() : 
                this.renderNote(note.note)
            }
        </Panel>
    )
}

render() {
    return (
        <div>
            {this.props.notes.map(this.renderCard)}
        </div>
    )
}

Answer 2

您可以为每个待办事项列表项使用单独的组件，并在map方法中使用它。以下示例给出了实现方法的想法。由于您未提供完整的代码，因此我在使用另一个示例。

class EditText extends React.Component {
  constructor(props) {
    super(props)
    this.state = {value:props.data,newValue:'hi'}
    this.editValue = this.editValue.bind(this)
  }
  editValue() {
    this.setState({value:this.state.newValue})
  }
  render() {
    return(
      <div>
      {this.state.value}
      <button onClick={this.editValue}>Change text to Hi</button>
      </div>
    )
  }
}
class App extends React.Component {
  constructor() {
    super()
    this.state = {tempDate : ['hello','how']}
  }
  render() {
    return (
      <div className="App">
      {this.state.tempDate.map(data=>(<EditText data={data}/>))}
      </div>
    );
  }
}

Answer 3

您需要为每个特定的卡设置状态变量isEditing。如果有3张卡片，则需要3个变量。

编辑1：- 示例已由Kody R共享。

我注意到的一件事情不是将数组大小硬编码为3，而是可以通过props中收到的音符数来分配数组大小。

this.state = {
    editingPanels: Array(3).fill(false)
  }

收件人

this.state = {
    editingPanels: Array(this.props.notes.length).fill(false)
  }

希望这会有所帮助，

欢呼！！

ReactJS从地图上唯一选择一个元素

3 个答案: