javascript - this.setState 不是函数 React

Question

我知道对于这种涉及使用绑定(bind)或箭头函数的情况有很多答案，但我的情况有点不同。基本上我想创建一个带有 EventListener 的 div 元素，它用我点击的特定子元素的索引值更新状态 setIndex 值。这个过程的回调函数是 onModal

如果我为 onModal 使用箭头函数，'this' 关键字会被转移到类中而不是单个元素，因此我将无法访问单个元素的索引。

如果我使用普通函数(正如我在下面的代码中演示的那样)，this.setState 会传输到各个元素，我会收到 setState 错误

class AddRecipe extends Component{
  constructor() {
    super();
    this.state={
      name:[],
      setIndex:0,
    }
  }

  onLoad() {

    var recipe = document.querySelector(".recipe")

    const name = data.forEach((d,index) => {
      var recipecard = document.createElement("div")
      recipecard.setAttribute("class","recipecard")
      recipecard.setAttribute("key",index)
      recipe.setAttribute("key",0)
      var h1 = document.createElement("h1")
      h1.setAttribute("id","keyhold")
      h1.appendChild(document.createTextNode(data[index].name))
      console.log(h1);
      recipecard.appendChild(h1)
      recipecard.addEventListener("click",this.onModal)
      recipe.appendChild(recipecard)
    })
  }

  componentDidMount() {
    this.onLoad()
  }

  onModal() {
    var index = this.getAttribute("key")
    var recipe = document.querySelector(".recipe")
    recipe.setAttribute("key",index)
    var modal = document.getElementById('MyModal')
    var btn = document.getElementById('myBtn')
    var modal = document.getElementById('myModal');
    var btn = document.getElementById("myBtn");
    modal.style.display = "block";

    this.setState({setIndex:index}).bind(this)

  }

  onClose() {
    var modal = document.getElementById('myModal');
    var span = document.getElementsByClassName("close")[0]
    modal.style.display= "none"
  }

  render() {
    return (
      <div>
        <div id="myModal" class="modal">
          <div class="modal-content">
            <span onClick={this.onClose.bind(this)} class="close">&times;</span>
            <ModalWindow datas= {data} index={this.state.setIndex} />
          </div>
        </div>
        <div className ="recipe">
        </div>
      </div>
    );
  }
}

export default AddRecipe

Answer 1

将 index 参数传递给事件处理程序并进行相应处理。

此外，由于您只需要元素上下文来检索 index，您可以将 index 发送到 onModal 方法，方法是使用函数柯里化(Currying)。这样您就不需要再依赖于元素的上下文。

如果您的 React 项目支持类实例方法的箭头函数，那么您可以尝试像下面这样传递参数。

class AddRecipe extends Component{
  ...
  onLoad() {
    var recipe = document.querySelector(".recipe")
    const name = data.forEach((d,index) => {
      ...
      recipecard.addEventListener("click",this.onModal(index))             
      recipe.appendChild(recipecard)
    })
  }

  onModal = (index) => (event) => {
    ...    
    this.setState({ setIndex:index })    
  }
  ...
}

export default AddRecipe

或

您甚至可以尝试 React 文档中记录的方式以避免任何混淆 https://reactjs.org/docs/handling-events.html#passing-arguments-to-event-handlers

class AddRecipe extends Component{
  ...        
  onLoad() {    
    var recipe = document.querySelector(".recipe")    
    const name = data.forEach((d,index) => {
      ...
      recipecard.addEventListener("click",(event) => this.onModal(index))             
      recipe.appendChild(recipecard)
    })
  }

  onModal = (index) => {
    ...    
    this.setState({ setIndex:index })    
  }
  ...
}

export default AddRecipe

查看这篇文章以了解向事件处理程序发送参数的多种方法

https://medium.freecodecamp.org/reactjs-pass-parameters-to-event-handlers-ca1f5c422b9