How to properly forward events in react?

Question

JavaScript

Hello. So I’m twisting react and in the process of studying the question arose, how is it more correct to forward events? At the moment, nothing smarter than the code below came to my mind ...

const MySuperInput = React.createClass({
  render: function () {
    const attr = { type: this.props.type };
    attr[this.props.eventName] = this.props.eventHandler;
    return React.createElement("input", attr);
  }
});

const MySuperComponent = React.createClass({
  _handle: function (e) {
    //какой-то обработчик
  },
  render: function () { 
    return <MySuperInput type="text" eventName="onChange" eventHandler={this._handle}/>
  }
});

Answer 1

Like this:

class Input {
  render() {
    return <input {...props} />
  }
}

class MyComponent extends Component {
  constructor(props) {
    super(props);

    this.state = {};
  }

  handleChange = e => {
    this.setState({e.target.value});
  }

  render() {
    return <Input type="text" onChange={this.handleChange} value={this.state.value} />
  }
}

And I recommend reading about ValueLink https://facebook.github.io/react/docs/two-way-bind...