Question

环境

操作系统：Windows 7 - 64位
框架：CodeIgniter PHP MVC
JS：React Js

我有两个不同的组件LeftComponent和RightComponent，它们由MergeLeftRightComponent合并。

负责渲染的

MainApp。

在LeftComponent和RightComponent中设置文本框。在左侧文本框中更改值时，我需要更新右侧文本框中的值和反之亦然中的值。

如何实现这个目标..？

从codeofaninja教程的基础知识中构建此应用程序。

我的应用示例视图

码

view.php

<!DOCTYPE html>
<head>
  <title>React page</title>
</head>
<body>
      <div class='task-container' id='task-container'>
      </div>

<!-- react js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>

<!-- react components -->
<script type="text/babel" src="<?php echo base_url('assets/js/components/right.component.js');?>"></script>
<script type="text/babel" src="<?php echo base_url('assets/js/components/left.component.js');?>"></script>
<script type="text/babel" src="<?php echo base_url('assets/js/components/merge.component.js');?>"></script>
<script type="text/babel" src="<?php echo base_url('assets/js/components/main.component.js');?>"></script>

<!-- jQuery library required by bootsrap js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
</html>

main.component.js

    var MainApp = React.createClass({

    render: function(){
      var modeComponent = <MergeLeftRightComponent changeAppMode={this.changeAppMode} />;
      return modeComponent;
    }
});

ReactDOM.render(<MainApp />,document.getElementById('task-container'));

merge.component.js

window.MergeLeftRightComponent = React.createClass({
    getInitialState: function() {
        return {
            inputVal:"",
        };
    },
    changeinputVal: function(e) {
      this.setState({
        inputVal: e.target.value,
      });
    },

    render: function() {
      return (
          <div className='task-container'>
            <LeftComponent inputVal={this.state.inputVal} onChange={this.changeinputVal}/>
            <RightComponent inputVal={this.state.inputVal} onChange={this.changeinputVal}/>
          </div>
      );
    }
});

left.component.js

window.LeftComponent = React.createClass({
  getInitialState: function(){
    return {
      task_name:"Mountain task"
    };
  },
  handleChange: function(e){
    this.setState({
      inputVal:e.target.value
    });
  },
  render: function() {
    return(
      <div className="left-box">
        <div className="info-container">
          <input type="text" className="task-name form-control" value={this.props.task_name} onChange={this.handleChange}/>
        </div>
      </div>
    );
  }
});

right.component.js

window.RightComponent = React.createClass({
  getInitialState: function(){
    return {
      task_name:"Mountain task"
    };
  },
  handleChange: function(e){
    this.setState({
      inputVal:e.target.value
    });
  },
  render: function() {
    return(
      <div className="right-box">
        <div className="info-container">
          <input type="text" className="task-name form-control" value={this.props.task_name} onChange={this.handleChange}/>
        </div>
      </div>
    );
  }
});

帮助我实现这一目标。在此先感谢..

Answer 1

在merge.component.js文件中，您需要绑定changeinputVal函数

在输入功能的left.component.js调用changeinputVal函数

 handleChange: function(e){
   this.setState({
     inputVal:e.target.value
   });
  this.props.onChange(e);
 },

merge.component.js档案

      class MergeLeftRightComponent extends React.Component {
            constructor(props) {
                super(props);
                this.changeinputVal = this.changeinputVal().bind(this);
            }
            getInitialState() {
                return {
                    inputVal: ""
                };
            }
            changeinputVal(e) {
                this.setState({
                    inputVal: e.target.value
                });
            }

            render() {
                return (
                    <div className='task-container'>
                        <LeftComponent inputVal={this.state.inputVal} onChange={this.changeinputVal}/>
                        <RightComponent inputVal={this.state.inputVal} onChange={this.changeinputVal}/>
                    </div>
    );

如何在React js中更新不同的组件文本框值？

我的应用示例视图

码

1 个答案: