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,
  }
},
handleChange: function(event){
  var pageName = event.target.value;
  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" onChange={this.handleChange} value={this.state.url}/><br/>
    </div>);
  }
});

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

A live demo can be see here. However, being that React re-renders after every input, the toLowerCase() function only picks up on the last letter. How would I make it so that it remembers the previous state(not looking for a slice()/splice() workaround, if possible). Thanks in advance!

回答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.

来源：https://stackoverflow.com/questions/33217799/how-would-one-do-two-day-data-binding-in-react-having-an-input-value-a-update-w