javascript - 如何将字符串添加到待办事项列表中的字符串列表 react

Question

大家好，大家都在尝试将下面 this.state.todo 中的字符串值添加到下面的数组(列表)中，以便我可以遍历它们。我需要帮助

import React, {Component} from "react";
import "./styles.css";

class App extends Component {
  state = {
    todo: '',
    list: []
  }

  changeHandler = (event) => {
    this.setState({
      todo: event.target.value
    }); 
  }

  submitHandler = (event) => {
    event.preventDefault()
    this.setState({
      list: [...this.state.list, this.state.todo]
    }); 
  }

  render(){


return (
  <div className="App">
    <input type="text" onChange = {this.changeHandler} />
    <button onSubmit={this.submitHandler}> Submit </button>
    {console.log(this.state)}
  </div>
);
  }
}
export default App

Answer 1

您可以将按钮事件更改为 onClick而不是 onSubmit .
或
其他 如果您使用的是 onSubmit你应该用 form 包裹组件

return (
  <div className="App">
   <form onSubmit={this.submitHandler}>
    <input type="text" onChange = {this.changeHandler} />
    <button > Submit </button>
    {console.log(this.state)}
  </form>
  </div>
)