在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?

问题描述

以下数据绑定代码:

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

可以在此处观看现场演示.但是，由于React在每次输入后都会重新渲染，所以toLowerCase()函数只会选择最后一个字母.我将如何使它记住先前的状态(如果可能，不要寻找slice()/splice()解决方法).提前致谢！

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!

推荐答案

您可以在输入中添加一个ID，以便确定在运行 handleChange 时输入来自何处.然后确保更新pageName时，所有输入到url的内容始终转换为小写.例如

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

但是您不能在两个字段之间进行双向绑定，并保持所有以名称键入的CAPS并将URL转换为小写.

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

这篇关于在React中为期两天的数据绑定，当输入值A为B时更新，反之亦然，同时保留先前转换的历史记录又如何呢?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！