Question

<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表单处理库，它正是这样做的，但是以更聪明的方式 - 它们缓存了生成的函数，以避免在每个渲染上创建一堆新的函数对象。只是不记得它是如何命名的 - 在反应世界中有太多新的libs：）

如何最小化或管理受控输入代码

1 个答案: