javascript - 在 React.js 中实现输入标签的自动保存

Question

我正在尝试实现 Google Tasks 添加任务功能(参见图片以供引用)。基本上，当您单击“添加任务”按钮时，它会打开一个输入字段，该字段会在您键入时自动保存。我正在尝试在 React.js 中实现它。

class App extends Component {

  state = {
    showInput: false,
    addTaskInput: ''
  }

  showAddTask = (e) => {
    this.setState({showInput: true})
  }

  saveInput = (e) => {
    this.setState({addTaskInput: e.target.value})
  }

  render() {
    const {showInput, addTaskInput} = this.state;
    return (
      <div className="app">
        <Button
          message="Add Task"
          bsStyle="primary"
          onClick={this.showAddTask}
        />
        { showInput && <input
          type="text"
          placeholder="Add Task here..."
          value={addTaskInput}
          onChange={this.saveInput}
        /> }
        <TodoList addItem={}/>
      </div>
    );
  }
}

这是我的代码。 App 是我的主要组件。 TodoList 是包含整个待办事项列表的组件。我要做的是:当我在输入中键入内容时，它会触发 onChange 并设置状态。在 onChange 内部，我还会更改 addItem Prop ，它将重新呈现 TaskList。由于不必要的重新渲染，这似乎不是最佳选择。当对输入的关注被删除 时，我正在考虑更改 addItem Prop 。

我该如何着手做后者？欢迎使用其他方法。

Answer 1

我会说这取决于您的应用程序在做什么；如果它只是一个简单的应用程序保存 onChange 还不错，但如果还有很多其他事情正在发生，是的，你应该优化。

• 开启模糊
• 混合击键和去抖动(我的最爱)
• 当输入超过设定长度时