reactjs如何最小化或管理受控輸入代碼

Question

我正在使用reactjs控制的輸入

以下代碼的參考

<input type="text" 
       value={this.state.username}
       onChange={(e) => this.setState({ username: e.target.value })}
       />

我想避免多余的代碼，如value , onChange並將它們移到組件

<input type="text" setValueOnChange=(this,'username')/>

Answer 1

雖然不可能完全獲得所需的結果，只是因為它不是語法上有效的JSX。 可以使外觀看起來非常相似：

// in render
<input type="text" 
  value={this.state.username}
  onChange={setValue(this, 'username')}
/>

// add this method to the component
setValue(propName) {
  return (e) => {
    this.setState({ [propName]: e.target.value })
  }
}

實際上，您可以提取setValue函數並將其與任何其他組件一起重用：

// in render
<input type="text" 
  value={this.state.username}
  onChange={setValue(this, 'username')}
/>

// somewhere outside of the component
function setValue(component, propName) {
  return (e) => {
    component.setState({ [propName]: e.target.value })
  }
}

我相信我已經看到了一些非常流行的React表單處理庫，它確實做到了這一點，但是以一種更聰明的方式–他們緩存了生成的函數，以避免在每個渲染器上創建一堆新的函數對象。 只是不記得它是怎么命名的-react world中有太多新的libs :)