React待办列表中如何将todo字符串值添加到list数组实现遍历渲染

核心问题定位 #

• 事件绑错了对象：onSubmit 只会被 <form> 元素触发，你直接把它挂在 <button> 上，点击按钮根本不会执行提交函数，这就是点了按钮没反应的根本原因。
• 提交完不清空输入值：把todo加进list之后，state里存的临时输入值没重置，下次再点提交还会把之前的旧值再加一遍。
• 没做空值拦截：用户啥也不输入直接点提交，会往list里塞空字符串，后续渲染的时候会出现一堆没内容的列表项。

修复后可直接运行的代码 #

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

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

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

  submitHandler = (event) => {
    event.preventDefault()
    // 空内容不加入列表
    if (!this.state.todo) return
    this.setState({
      list: [...this.state.list, this.state.todo],
      // 提交后清空输入框的临时值
      todo: ''
    }); 
  }

  render(){
    return (
      <div className="App">
        <form onSubmit={this.submitHandler}>
          <input 
            type="text" 
            value={this.state.todo}
            onChange = {this.changeHandler} 
          />
          <button type="submit"> Submit </button>
        </form>
        {/* 列表遍历渲染逻辑示例 */}
        <ul>
          {this.state.list.map((item, idx) => (
            <li key={idx}>{item}</li>
          ))}
        </ul>
      </div>
    );
  }
}
export default App

改动说明 #

• 把输入框和按钮包在<form>里，把提交事件挪到form上，给按钮加上type="submit"属性。这样不管是点按钮还是在输入框按回车，都能正常触发提交逻辑，event.preventDefault()也能拦住表单默认的刷新跳转行为。
• 给input加上value={this.state.todo}的绑定，让它变成受控组件，提交完把todo重置为空的时候，输入框就会自动清空，不需要额外手动操作DOM。
• 加了空值判断，输入内容全是空格的时候不会把内容加进列表，避免无效数据。
• 补了list遍历渲染的示例代码，你可以直接在这基础上加删除、编辑、标记完成的功能。

如果不想用form包裹元素，也可以直接把按钮上的事件改成onClick触发提交逻辑，这种场景下不需要调用event.preventDefault()，但会缺失按回车提交的便捷交互。

内容的提问来源于stack exchange，提问作者user13824605