Reactjs 反应自定义控制的表单组件事件

当我们使用内置的HTML输入组件时，

onChange

侦听器被提供了一个实例，它允许我们执行以下操作

onChange = (event) => {
  this.setState({
    [event.target.name]: event.target.value
  })
};

render() {
  return (
    <div>
      <input 
        type="text" 
        name="username" 
        value={ this.state.username }
        onChange={ this.onChange } />

      <input 
        type="password" 
        name="password" 
        value={ this.state.password }
        onChange={ this.onChange } />
    </div>
  );
}

onChange=（事件）=>{
这是我的国家({
[event.target.name]：event.target.value
})
};
render（）{
返回(
);
}

请注意，我可以对多个表单控件使用同一个侦听器。但是，如果我们使用自定义表单控件，比如DatePicker或更特定于域的东西（如UserSelector），这些组件通常有自己的API来处理更改（例如，

onChange（newValue）

或

onChange（oldValue，newValue）

）。这迫使我为每个字段编写一个侦听器

---

有什么好的方法来处理这种情况吗？

一种方法是构建自己的数据结构来发出类似于事件的信息

import React, { PureComponent } from 'react';

const onChange = component => event => {
  component.props.onChange({
    target: {
      value: Object.assign({}, component.props.value, {
        [event.target.name]: event.target.value,
      })
    }
  })
};

export default class UserControl extends PureComponent {
  render () {
    return (
      <div>
        <input name="name" value={this.props.value.name} onChange={onChange(this)} />
        <input name="age" value={this.props.value.age} onChange={onChange(this)} />
      </div>
    );
  }
};

const onChange = component => event => {
  event.persist();
  component.props.onChange({
    stopPropagation: event.stopPropagation.bind(event),
    target: {
      value: Object.assign({}, component.props.value, {
        [event.target.name]: event.target.value
      })
    }
  });
};