解決antd+react的Input組件每次輸入都失去焦點

這是一個很容易遇見的問題，每輸入一個字符Input的焦點就沒了，本文將就此問題做分析和介紹一種解決方法。
出現的原因可能是你在組件的render函數中用了通過函數生成的Input組件，具體請看分析。
如果你遇見該種問題時並沒有使用函數式組件，請告知，並一起思考解決方案。

本文涉及的現象及常見的原因

一般情況下在react框架下使用Input組件時，不管是跟着教程或者是網絡搜索的用法，常見如下：

export default class Test extends Component {
  onChange=(e)=>{
    this.setState({
      value: e.target.value,
    })
  }
  render() {
    return (
      <div>
        <Input onChange={this.onChange} value={this.state.value}></Input>
      </div>
    )
  }
}

縱觀搜索到的資料，基本都是這種用法，這種用法當然沒問題，是一種很標準的用法，但是當它遇到函數式組件的時候會出現每次輸入都會失去焦點的問題，

函數式組件？

  render() {
  	let input = <Input onChange={this.onChange} value={this.state.value}></Input>
    return (
      <div>
        {input}
      </div>
    )
  }

就是說當你的組件中需要用邏輯來控制渲染什麼組件的時候會用一個變量指向一個函數，該函數返回一個組件，這個邏輯中可能會有switch或者若干個if語句。

此時！每次render的時候，相當於都要調用這個函數來重新生成一個組件用於渲染，也就是說這時候的組件已經不是上次渲染出的組件了，當然會出現這種沒有焦點的情況了。

解決方案

如果你看到了這裏，說明你確實使用了函數式組件，在這種情況下，你可以參考下文中的方案，希望可以有所幫助。

有些文章提出的解決方案是不要用函數式組件，這不就是經典的“既然解決不了問題，就解決製造問題的人”的例子嘛？目前可供參考的解決方案如下：

export default class Test extends Component {
  onChange=(e)=>{
    this.inputValue = e.target.value;
  }
  onBlur=()=>{
    this.setState({
      value: this.inputValue,
    })
  }
  render() {
    return (
      <div>
        <Input 
          onChange={this.onChange} 
          // 在失去焦點的時候再setState，如果業務允許增加一個按鈕，也可以放在按鈕的click事件裏
          onBlur={this.onBlur}
          // 這種方法在setState之後，重新生成的Input組件裏面的內容就沒了，可以用defaultValue重新加載上次的值。
          defaultValue={this.state.value} 
        ></Input>
        // 如果業務允許增加一個按鈕的話，可以把setState方法放在按鈕的click事件裏。
        <Button onClick={this.onBlur}>提交</Button>
      </div>
    )
  }
}

一種曲線救國的方案吧，但是總體思路就是，如果無可避免地要使用函數式組件的話，在向Input組件裏輸入內容的過程中不要讓它觸發render，把這個觸發操作放在輸入結束後，手動的點擊按鈕或者待它失去焦點。

以上。希望能有所幫助。

If the world leaving nothing but one, that must be the love.