React Js：从兄弟组件设置输入值 [英] React Js: Set input value from sibling component

问题描述

我正在学习 ReactJS 并尝试使用它开发小型 CRUD 表单。此时，我试图从其他兄弟组件设置输入值来执行更新。

I am learning ReactJS and trying to develop small CRUD form using it. At this point, I am trying to set input values from other sibling component to perform update.

所以，如果我点击在第一行上的编辑按钮，管理名称和描述输入框应该abc com和公司Abc值。

So, if I click on edit button in first row on grid, Organzation Name and Description input boxes should get "abc com" and "company Abc" values respectively.

var OrganizationHandler = React.createClass(
    render: function() {
        return (
            <div>
                <OrganizationAPP onOrganizationSubmit=this.handleOrganizationSubmit} />
                <OrganizationList external_DeleteOrganization={this.DeleteOrganizationFromServer} data= {this.state.data}  />
            </div>
       );
    }
});

var OrganizationList = React.createClass({
    internal_DeleteOrganization: function(id) {
        this.props.external_DeleteOrganization(id);
    },
    render: function() {
        var results = this.props.data;
        var parsed_results = results.objects;
        var that = this;
        var organizations = parsed_results.map(function(organization){
            return <Organization onDeleteOrganization={that.internal_DeleteOrganization} id={organization.id} name={organization.name} description={organization.description} />
        });

        return(
            <div>
                {organizations}
            </div>
        );
    }
});

var Organization = React.createClass({
    handleDeleteClick: function() {
        console.log(this.props);
        this.props.onDeleteOrganization(this.props.id);
    },
    handleEditClick: function () {
        alert(this.props.name);
    },
    render: function() {
        return (
            <div className="row">
                <div className="small-2 large-2 columns">{this.props.id}</div>
                <div className="small-4 large-4 columns">{this.props.name}</div>
                <div className="small-4 large-4 columns"> this.props.description}</div>
                <div className="small-2 large-2 columns">
                    <input type="button" onClick={this.handleDeleteClick} data-order={this.props.id} value="Delete" />
                    <input type="button" onClick={this.handleEditClick} data-order={this.props.id} value="Edit" />
                </div>
            </div>
        );
    }
});

var OrganizationAPP= React.createClass({
    getInitialState: function() {
        return {name: '',  description:''};
    },
    onChangename: function(e) {
        this.setState({name: e.target.value});
    },
    onChangedescription: function(e) {
        this.setState({description: e.target.value});
    },
    handleSubmit: function() {
        var name = this.refs.name.getDOMNode().value.trim();
        var description = this.refs.description.getDOMNode().value.trim();
        if (!description || !name) {
            return false;
        }

        this.props.onOrganizationSubmit('{"name":"' + name +'", "description": "' + description +'"}');
        this.refs.name.getDOMNode().value = '';
        this.refs.name.getDOMNode().value = '';
        this.setState({name: '', description: ''});
        return false;
    },
    render: function() {
        return (
            <div>
                <h1>Organization Setup:</h1>
                <form onSubmit={this.handleSubmit}>
                    <div className="row">
                        <div className="small-12 large-3 columns">
                            <label>Organization Name:</label>
                            <input type="text" ref="name" required value={this.props.name} onChange={this.onChangename}/>
                        </div>
                    </div>
                    <div className="row">
                        <div className="small-12 large-7 columns">
                            <label>description:</label>
                            <input type="text" required ref="description" value={this.props.description} onChange={this.onChangedescription}  />
                        </div>
                    </div> 
                    <div className="row">
                        <div className="small-2 large-3  columns">
                            <button type="submit"> Add </button>
                        </div>
                    </div>
                </form>
            </div>
        )
    }
});

我已成功执行添加和删除操作但我不知道如何在同级组件的输入框中设置要编辑的值。如果您对我刚开始学习 reactjs 感到不理解，请告诉我。我知道我的代码不符合标准。

I have successfully performed addition and deletion operations but I don't know how can I set values to be edit in input boxes from sibling component. Please let me know if you don't understand anything as I just started learning reactjs and I know my code is not up to the mark.

推荐答案

这是一个示例列表编辑应用程序，其中使用父输入编辑项目内容（可能很容易成为兄弟姐妹） 。

Here is an example list editing app where editing an item content is done with a parent input (could easily be a sibling).

/** @jsx React.DOM */

//React is for rendering our app UI. 
//Not for writing the app. 
//So the first step is building out your logic in whatever you prefer.
//That could be Backbone, some other framework, or plain JS as we do here.

//our app
var app = {

  //we'll tell this listener when we change
  listener: null,

  //a cheap way of creating IDs for our new data
  nextId: 3,

  //pre-populate our data
  rows: [
    {id: 1, name: "entry 1"},
    {id: 2, name: "entry 2"}
  ],

  //what data are we focused on
  focusedId: 1,

  //add a new row of data and set it to focused
  addRow: function () {
    var id = this.nextId++;
    this.rows.push({id: id, name: ("entry " + id)});
    this.setFocusedId(id);
  },

  //get the name property given the data id
  getName: function(id){
    return _.findWhere(this.rows, {id: id}).name;
  },

  //update the name property of the currently focused data
  updateName: function (name) {
    var id = this.focusedId;
    _.findWhere(this.rows, {id: id}).name = name;
    this.listener.changed();
  },

  //set the focused data
  setFocusedId: function (id) {
    this.focusedId = id;
    this.listener.changed();
  },
};

//a row component 
var Row = React.createClass({
  render: function () {
    if (this.props.focused) {
      return <span>Value: {this.props.name} [editing]</span>;
    } else {
      return <span>
      Value: {this.props.name} 
        [<a href='#' onClick={this.props.focus}>edit</a>]
      </span>;
    }
  }
});

//the main view
var View = React.createClass({

  //our state is the app
  getInitialState: function () {
    return {
      app: app
    };
  },

  //before we render, start listening to the app for changes
  componentWillMount: function () {
    this.state.app.listener = this;
  },

  //update if the app tells us it changed
  changed: function () {
    this.forceUpdate();
  },

  //a handler we'll use for input fields
  textChanged: function (event) {
    this.state.app.updateName(event.target.value);
  },

  //let's render
  render: function () {
    var app = this.state.app;

    //build an array of row components
    var rows = _.map(app.rows, function (row) {
      var focus = function () {
        app.setFocusedId(row.id);
      };
      //the actual row component
      //give the row a unique id
      //give it a name, the focus handler function,
      //and tell it if it has the current focus
      return <li key={row.id}>
        <Row 
          name={row.name}
          focused={row.id == app.focusedId}
          focus={focus}
        />
      </li>;
    });
    //the main app view
    return <div>
    EDIT:
      <input 
        type="text" 
        value={app.getName(app.focusedId)} 
        onChange={this.textChanged}
      />
      <ul>{rows}</ul>
      <a href="#" 
        onClick={function(){app.addRow()}}>
        add row
      </a>
    </div>;
  }
});

React.renderComponent(
    <View />
    , document.body); 

这是一个有效的例子：
http://jsbin.com/laxejufila/2/edit

这篇关于React Js：从兄弟组件设置输入值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！