Question

我正在创建一个待办事项列表应用程序。我在构造函数中创建了一系列任务，使用map方法在屏幕上呈现所有任务。当我试图通过点击按钮获取文本的文本值时，它每次都给我最后一个值。什么可以解决？

我需要的是例如，如果我点击第二个更改按钮，它应该显示“task2”，而不是“task3”

代码：

import React, { Component } from 'react';
import './bootstrap.min.css';

class FieldGroup extends Component {
  constructor(props){
    super(props);

    this.state = {
      edit:false,
      tasks: [ 
              "task1", 
              "task2", 
              "task3" 
      ]
    },

    this.handleChange = this.handleChange.bind(this);

    this.handleRemove = this.handleRemove.bind(this);
  }

  handleChange(index){
    const currText = this.refs.currval.innerText;
    alert(currText);
  }

  handleRemove(){

  }


  render(){
      return (
        <div className="Field">
          {
            this.state.tasks.map((item,index) => {
              return (
                <div key={index} index={index}>
                  <h2 ref="currval">{item}</h2>
                  <button type="button" className="btn" onClick={this.handleChange}>Change</button>
                  <button type="button" className="btn" onClick={this.handleRemove}>Delete</button>
                </div>
              )
            })
          }
        </div>
      )
  }
}

export default FieldGroup;

Answer 1

字符串refs存在一些问题，被视为遗留问题，可能会在以后的某个版本中删除

注意： ref回调仅用于DOM目的而不用于数据值。

以这种方式定义处理程序。

onClick={(event) => this.handleChange(item)}

渲染：

render() {
    return (
      <div className="Field">
        {
          this.state.tasks.map((item, index) => {
            return (
              <div key={index} index={index}>
                <h2 ref="currval">{item}</h2>
                <button type="button" className="btn" onClick={(event) => this.handleChange(item)}>Change</button>
                <button type="button" className="btn" onClick={this.handleRemove}>Delete</button>
              </div>
            )
          })
        }
      </div>
    )

<强> handleChange

handleChange(item) {
    alert(item);
  }

工作react#codesandbox-demo

关于使用“ref”的React JS问题

1 个答案: