react.js - react关于父子组件的数据绑定问题

问题描述

问 题

父组件中有一个input， 子组件也有一个input，想绑定这两个input，当其中一个input数据修改时， 另一个也修改。我已经写好了代码 但是有个问题，每次修改都会导致两个input re-render。请教有什么其他的方法实现这个呢。
还有一个问题，如果state中value的值为1，我通过setState（{value: 1}），这两个值是一样的，这也会触发render；这里render的应该是Virtual DOM吧？ 感觉挺小白的问题。。。

var Dad = React.createClass({

      getInitialState: function() {
          return {
              value : '0'
          }
      },

        handleChange: function(e){
            this.setState({
                value: e.target.value
            })
        },

        handleChild: function(val) {
            this.setState({
              value: val
            });
        },

        render : function() {
            console.log('dad render')
            var _value = this.state.value;
            return (
                <div>
                    <input type = "text" onChange = {this.handleChange} value = {_value} />
                    <Son value = {_value} change = {this.handleChild} />
                </div>
            )
        }
  });

  var Son = React.createClass({

      handleChange: function(e) {
            this.props.change(e.target.value);
      },

      render: function() {
          console.log('son render')
          return (
                <input type="text" onChange={this.handleChange} value={this.props.value} />
          )
      }
  });

React.render(
    <Dad />,
    document.body
);

解决方案

状态变化组件就会重新 render，这样实现没问题。

这篇关于react.js - react关于父子组件的数据绑定问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！