时间戳

首页 > 解决方案 > 无法访问 handleSubmit 中的状态

reactjs - 无法访问 handleSubmit 中的状态

问题描述

我是 React 的初学者。我正在构建待办事项应用程序。我正在尝试使用 handleSubmit 函数将输入值设置为列表。但奇怪的是我无法访问handleSubmit函数中的状态。我绝对知道我在某个地方搞砸了。请让我知道我在哪里搞砸了。

import React from 'react'

class Todo extends React.Component{
  state = {
    input : '',
    list : []
  }

  handleSubmit(){
   const listArray = this.state.input
     this.setState({
     list:listArray,
      input:''
     })
    console.log(this.state)
  }
  handleChange(e){

    this.setState({
      input:e
    });

  }
  render(){

    return(
      <React.Fragment>
      <input onChange = {(e) => this.handleChange(e.target.value)}
      value = {this.state.input}></input>
      <button onClick = {this.handleSubmit}>Click here</button>
      <ul>
      {this.state.list.map( (val) => <li>{val}</li>)}
      </ul>
      </React.Fragment>
    )
  }
}

export default Todo

标签： reactjs

解决方案

您需要在构造函数中绑定函数。还要在构造函数中定义状态。

如果我错了，请纠正我，您想在每次提交后将新项目添加到数组中。但是在您的代码中，您只需将输入的值分配给列表。这不会按预期工作。你应该使用带有key属性的li标签。我在这里更改了您的代码。 

class Todo extends React.Component {
   constructor(props) {
       super(props);
       this.state = {
           input : '',
           list : []
       };
       this.handleSubmit = this.handleSubmit.bind(this);
       this.handleChange = this.handleChange.bind(this);
   }
}

推荐阅读