React简易待办应用：替换prompt为输入框的onChange实现问题

核心问题说明 #

你当前使用的是React类组件写法，之前注释里写的setTaskName是函数组件专属useState Hook的用法，不能直接在类组件里使用。类组件的所有状态都要统一存在this.state中，通过this.setState更新。

具体修改步骤 #

• 1. 扩展组件state，新增字段存储输入框实时内容
     在constructor的state初始化里添加inputText: ''，同时删掉顶部没用的useState导入，类组件不需要这个Hook
• 2. 编写输入框变化的处理方法
     新增handleInputChange类方法，触发时把输入框的最新值同步到state
• 3. 重写addTodo逻辑
     移除prompt调用，直接从state读取输入的文本，新增非空校验避免添加空待办，添加完成后清空输入框对应的state值
• 4. 把输入框改成受控组件
     给input标签绑定value属性对应state里的输入值，绑定onChange事件到刚才写的处理方法

修改后完整可运行代码 #

import React from 'react';
let id = 0
const Todo = props => ( 
  <li>
    <input type="checkbox" checked={props.todo.checked} onChange={props.onToggle} />
    <button onClick={props.onDelete}> delete</button>
    <span>{props.todo.text}</span> 
  </li>
)

class App extends React.Component {
  constructor() {
    super()
    this.state = {
      todos: [], 
      inputText: '' // 存储输入框实时内容
    }
  }

  // 输入框内容变化处理逻辑
  handleInputChange = (e) => {
    this.setState({
      inputText: e.target.value
    })
  }

  addTodo = () => {
    const text = this.state.inputText.trim()
    if (!text) return // 空内容不添加
    this.setState({
      todos: [...this.state.todos, {id: id++, text: text, checked: false}],
      inputText: '' // 添加完成后清空输入框
    })
  }

  removeTodo = (id) => {
    this.setState({
      todos: this.state.todos.filter(todo => todo.id !== id )
    })
  }

  toggleTodo = (id) => {
    this.setState({
      todos: this.state.todos.map(todo => {
        if (todo.id !== id) return todo
        return {
          id: todo.id,
          text: todo.text,
          checked: !todo.checked,
        }
      })
    })
  }

  render() {
    return (
      <div>
        <div> Todo Count: {this.state.todos.length}</div>
        <div> Unchecked Count: {this.state.todos.filter(todo => !todo.checked).length} </div>
        <div className="App">
          <label> Task Name:</label>
          <input 
            type="text" 
            id="task" 
            value={this.state.inputText}
            onChange={this.handleInputChange}
          />
          <button onClick={this.addTodo}> Add ToDo </button>
        </div>
        <ul>
          {this.state.todos.map(todo => (
            <Todo
              onToggle={() => this.toggleTodo(todo.id)}
              onDelete={() => this.removeTodo(todo.id)}
              todo={todo}    
            />
          ))}
        </ul>
      </div>
    )
  }     
}

export default App;

补充说明 #

所有类方法这里都用了箭头函数写法，自动绑定this指向，不需要在constructor里额外写bind逻辑。输入框通过绑定value和onChange成为受控组件，输入内容全程由React状态管理，不会出现输入不同步的问题。

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