How Would One Do Two Day Data Binding In React, Having An Input Value A Update When B Is And Vice Versa, While Keeping History Of Previous Transforms?

The following code for data binding: var Text = React.createClass({ getInitialState: function(){ return { pageName: this.props.pageName, url: this.props.pageName,

Solution 1:

You could add an id to the inputs to be able to determine where the input came from when handleChange is run. And then make sure that all input into url is always translated to Lowercase when you update pageName. E.g.

var Text = React.createClass({
  getInitialState: function(){
      return {
          pageName: this.props.pageName,
          url:  this.props.pageName,
      }
  },
  handleChange: function(event){
      var pageName = event.target.value;
      // ADDED EXTRA LINE HERE
      pageName = (event.target.id == "url") ? pageName.toLowerCase() : pageName;
      var url      = event.target.value.toLowerCase();
      this.setState({
          pageName: pageName,
          url: url,
              });
  },
  render: function() {
    return (
        <div>
        pageName: <input ref="pageName" onChange={this.handleChange} value={this.state.pageName}/><br/>
        url: <input ref="url" id="url"onChange={this.handleChange} value={this.state.url}/><br/>
        </div>);
  }
});

React.render(<Text pageName="name" />, document.body);

You CANNOT however do two-way binding between both fields AND maintain all CAPS typed in name AND transform url to lowercase.