在React.js中的输入标记上实现自动保存

Question

我正在尝试实施Google Tasks Add Task功能（请参阅图片以供参考）。基本上，当您单击“添加任务”按钮时，它会打开一个输入字段，该字段会在您键入时自动保存。我正在尝试在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是包含完整Todos列表的组件。我要做的是： 当我在输入中输入内容时，它会触发onChange并设置状态。在onChange里面我也会更改addItem道具，它会重新渲染TaskList 。由于不必要的重新渲染，这似乎不是最佳的。当关注输入时，我正在考虑更改addItem道具。

我如何做后者？欢迎采用其他方法。

Answer 1

我会说这取决于你的应用程序在做多少;如果它只是一个简单的应用程序保存./node/text()并不坏，但如果还有其他很多，是的，你应该优化。

• 的onblur
• 混合按键和去抖（我最喜欢的）
输入超过设定长度时