（p）做出反应，避免不必要的重新提交

Question

当专注于输入框时，按Enter即可提交表单。提交时，错误会导致将错误插入状态，从而导致重新呈现并创建一个新元素来显示错误。

{error && <div>{error}</div>}

这样就重新渲染了不必要的整个组件。

确定（p）react应该能够检测到仅插入了新的错误元素，而其余DOM可以保持不变吗？

这样的结果是我失去了输入的焦点，而且重新安装了条形iframe。我该如何预防

演示

export default class App extends Component {
  state = { val: "Sample input", error: null };
  onSubmit = e => {
    e.preventDefault();
    this.setState({ error: "Some error" });
  };

  render(props, { val, error }) {
    return (
      <div>
        <h1>Example</h1>
        <form onSubmit={this.onSubmit}>
          {error && <div>{error}</div>}
          <div class="list">
            <input
              value={val}
              onChange={e => this.setState({ val: e.target.value })}
            />
            <button type="submit">Submit</button>
          </div>
        </form>
      </div>
    );
  }
}

---

?? 更新资料

问题是反应如何调和孩子。

解决方案1通过将key属性添加到条件组件中，我可以避免重新渲染整个组件并保持焦点。

{error && <div key='formError'>{error}</div>}

解决方案2或者，我可以将条件错误移到输入下方

<div class="list">
  <input
    value={val}
    onChange={e => this.setState({ val: e.target.value })}
  />
  <button type="submit">Submit</button>
</div>
{error && <div>{error}</div>}

解决方案3或使用一个类来隐藏错误

<div className={error ? 'error' : 'hide'}>{error}</div>

Answer 1

最初你有<div>里面input。提交表单组件后需要显示两个<div>：一个是错误，一个是表单。但要更新什么、创建什么？没有key和有精确构造函数的两个元素， React 决定使用错误消息更新现有元素（并删除表单），并创建一个新的元素来渲染表单。

And at this move it loses focus inside field. So it's not because of re-render in general but because of reconciliation specifically.

So yes, nice catch, key solves that by suggesting React not to mess within divs but create new for error message. If you had different elements(say, div and... ul) you will never experience that. But providing key also legit way to handle that. Maybe slightly confusing from first glance.