如何在 React 中进行为期两天的数据绑定，让输入值 A 在 B 更新时更新，反之亦然，同时保留先前转换的历史记录？

Question

数据绑定代码如下：

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);

可以看到现场演示here。然而，由于 React 在每次输入后都会重新渲染，因此 toLowerCase() 函数只会在最后一个字母上进行处理。我将如何做到这一点，以便它记住以前的状态（如果可能，不寻找 slice()/splice() 解决方法）。提前致谢！

Answer 1

当 handleChange 为运行时，您可以向输入添加一个 id 以便能够确定输入的来源。然后确保在更新 pageName 时，所有输入 url 的内容始终转换为小写。例如

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);

但是，您不能在两个字段之间进行双向绑定并保留名称中键入的所有大写字母并将 url 转换为小写字母。

如何在 React 中进行为期两天的数据绑定，让输入值 A 在 B 更新时更新，反之亦然，同时保留先前转换的历史记录？

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?

javascript

data-binding

transformation

reactjs