reactjs如何最大限度地減少或管理控制輸入代碼

Question

I am using reactjs controlled input

reference for below code

<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表單處理庫正是這樣做的，但是以一種更智能的方式 - 他們緩存了生成的函數，以避免在每個渲染上創建一堆新的函數對象。只是不記得它是如何命名的 - 在反應世界中有太多新的庫。）